Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between -webkit-box-shadow & box-shadow in CSS
As we already know that CSS provides us with a wide range of properties and pseudoclasses, which enables developers to add the desired styling to the element. One such property is box shadow property; it allows us to add a shadow like effect around the element.
Box-shadow Property
Box shadow is a CSS property used to create an outer or inner shadow effect on elements. It applies one or more shadows to the element, each of which is specified with X and Y offsets from the element, blur radius, spread radius, color and opacity value.
The box-shadow property can accept multiple values separated by commas; each value defines a single shadow effect. A box-shadow applied without any offset will make it look like a flat shape as if it were printed on paper.
Let’s say, the element to which we are applying the box-shadow has some form of borderradius specified on it, the effect of the box-shadow will also have a curved border just like the element. The ordering on the z-axis of multiple box-shadows is the same as that of multiple text shadows.
We can specify a box-shadow for an element using −
Two values − Whenever we use the box-shadow property with two values they will be used as the values for X and Y offsets.
Three values − The first two values act as the values for X and Y offsets while the third value is for blur radius effect.
Four values − The fourth value is treated as the value for spread radius while the rest are the values for X offset, Y offset, and blur radius respectively.
Inset − It is an optional value whose presence makes the shadow of the frame to one side. If we do not specify this, the shadow seems to be raised above, like drop shadow
Color − It is another optional value which sets the color of the shadow. If not specified, the color defaults to current color of the element.
Its initial value is none and it applies to all elements. It can be animated with the animation type of shadow list, but it is not inheritable.
Example
An example of using a box-shadow property in CSS is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Shadow</title>
<style>
blockquote {
padding: 20px;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<blockquote>
<q>
This is an example of box shadow effect on elements <br />
Another temporary line for extra text
</q>
<p>— Example of Box Shadow</p>
</blockquote>
</body>
</html>
Now that we know about the box shadow property, we will look into what is ‘webkit’ in CSS and why do we need it. After that we will discuss the webkit box shadow.
What is webkit?
Webkit is Apple’s web browser engine which is used in almost all the apps for macOS. There are a lot of other web browser engines, for example Gecko for firefox, blink for edge and so on. So, the question arises that why we need them.
The -webkit prefix on CSS selectors denotes properties that are solely intended to be processed by this engine, analogous to -moz properties. By specifying this, we are basically telling the browser to use this only when the specific browser engine is being used and leave it as it is otherwise. It is quite bothersome to use; this is why many developers are hoping that this is discontinued soon.
Webkit-box-shadow property in CSS
Like the box-shadow property, webkit-box-shadow property also adds shadow like effects to the frame of the element, it is being applied to. But the thing to note is that, its implementation is specific to browsers like Chrome or Apple’s Safari.
The possible values that can be given to this property are −
X-offset − It specifies the horizontal offset or distance to the element.
Y-offset − This also specifies offset or distance but in the vertical direction instead
Blur − It is a length value, if it is a large value the blur effect created will also be large, so the shadow effect becomes large and vice versa.
Example
An example of using the web kit-box-shadow in CSS is given below.
<!DOCTYPE html>
<html>
<head>
<style>
.BoxShadow {
color: blue;
border: solid 1px blue;
margin: 1.5rem 3rem;
-webkit-box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>
<div class="BoxShadow">
<h1>Sample text</h1>
<p>Some more random text</p>
</div>
</body>
</html>
Differences between box-shadow and webkit-box-shadow
Now that we know about both these properties, let us list the difference between them.
The box shadow property is implemented generally while on the other hand ‘webkitbox-shadow’ only works on browsers that use the specific web browser engine, i.e., Safari or Google Chrome.
The box shadow property makes it so that we can style shadow effects in all the latest versions but if we have to work on the older versions of the browsers, we have to use webkit-box-shadow.
Conclusion
To conclude, the main difference between -webkit-box-shadow and box-shadow in CSS is that -webkit-box-shadow is a vendor prefix for the box-shadow property introduced by Webkit browsers. The Box Shadow property allows you to apply a drop shadow effect to an element without using an image or other external resource. The -webkit-box-shadow property has been deprecated and replaced with the standard box-shadow syntax. Because most modern browsers support it. In summary, both properties are used to create shadows on elements, but only one should be used as the other will be deprecated over time.
604 Views
To Continue Learning Please Login