6 Lesser Known Things about CSS
Published on 25 September 15
Semaphore0
CSS keeps updating itself, in a way that you need to keep up with the changing features and tones of this stylesheet. You need to know the new syntax, and also the no-code methods that you can ideally use. Here you will be introduced to some of the lesser known facts of CSS that will help you catch up with the details.
Border-radius with Slash
If you want to define the radius for a shape that you are planning to use in your website, then you can use the slash property to define the border radius. Hereâs how you will be coding it.
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}For those, who feel this is not a valid way of entering the radius, think again! CSS has defined the slash property as valid.
border-top-left-radius: values
this will determine the curvature of the shape
Font Weight Uses Relative Keywords
The normal properties defined for font-weight would be normal or bold. You can also use integer values to define it. But, what is not generally used is bolder or lighter. But, it seems now the things have changed. The values attached to bold was 700 while for normal it was 400. Now, the code below shows how relative keywords with values can change the appearance of your font weight
.box {
font-weight: 100;
}
.box-2 {
font-weight: bolder; /* maps to 400 */
}
.box-3 {
font-weight: bolder; /* maps to 700 */
}
.box-4 {
font-weight: 400;
}
.box-5 {
font-weight: bolder; /* maps to 700 */
}
.box-6 {
font-weight: bolder; /* maps to 900 */
}
.box-7 {
font-weight: 700;
}
.box-8 {
font-weight: bolder; /* maps to 900 */
}
.box-9 {
font-weight: bolder; /* maps to 900 */
}
.box-10 {
font-weight: lighter; /* maps to 700 */
}
.box-11 {
font-weight: lighter; /* maps to 400 */
}
.box-12 {
font-weight: lighter; /* maps to 100 */
}The mapping values have changed for each case, as shown in the code above. This is a relative method.
Outline-Offset Property
With this property you can define the limit for the outline to be offset from the element in concern. This is a rarely used property, which you can use if you want to improve your debugging options. Normally, outline does not include outline-offset, and you will need to define it separately. Well, there is a limitation to this property. It is not supported by your IE browser, and that could be a setback.
The Table-Layout Property
This is yet another property that is rarely used, and is lesser known. It is not really self explanatory, as you feel. You can ensure that the horizontal layout is not really content dependent but width dependent if you use this property properly. You can even fix the table layout, or use toggle button to toggle between properties. This is a brilliant property, which can be used if your layout consists of a few tables
The :first-letter Element
If you want to style the first letter of any element, then this is the property you should be using. This gives your first letter the drop cap effect, which is again extremely important. There is a standard that has been established over a period of time, which reflects how the first letter should be specified. This element property helps define the first letter in a standard manner.
Animation Iterations as Fractional Values
You can use the animation-iteration-count property to fix the number of times the animation will be played.
.example {
animation-iteration-count: 3;
}The count can go from an integer value to half time, as specified by you. This is an interesting feature that you should use if you are creating animation in CSS.
Conclusion
It is always good to tap on the lesser known coding procedures that CSS handles. You get a better idea of how to perform with CSS techniques. Hire Web Developers to give out the best stylesheets and designs for your applications.
This blog is listed under
Development & Implementations
Community
Related Posts:
Post a Comment
