Setting not only the width but the color of the border is possible. A ray of hope is -webkit-text-stroke, which gives text a border. One of the shortcomings of CSS borders is that only rectangular ones are possible. webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) įurther reading: Safari Developer Library -webkit-text-stroke For more info, see the Surfin’ Safari blog and the link below. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. The mask can either be a CSS3 gradient or a semi-transparent PNG image. webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9. specification, which means that a broad range of browsers, even older ones, support them. Finally, certain properties are part of the official CSS 2.1. Some explanation: For each property, I state the support: “ WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “ Gecko” indicates the availability in Firefox and the like. In this article, we will look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful.Įven the Gecko engine, used by Firefox and the like, provides some distinct properties. Perhaps some of them rightly so, but others deserve more recognition. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.īut hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Have a look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.ĭespite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. Hidden deep within the treasure chests of browsers are heavily underrated properties which can be quite useful.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |