I am very much impressed by the "inset" like effect in many latest websites. Some examples are
and
The line in the center. Nowadays, many websites use these kinds of lines/effects.
I tried to achieve the same with borders but the color combination is not working me and it is not proper.
Do other websites use images for these ? is it easy to this ?
Any example css ?
Example sites: http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar
Use border-bottom and box-shadow.
body {
background-color: #D0D9E0;
}
h1 {
border-bottom: 1px solid #EFF2F6;
box-shadow: inset 0 -1px 0 0 #AFBCC6;
}
Check out the Fiddle and Browser Compatibility for box-shadow property.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With