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.
The values before the slash are for the horizontal radius while that after the slash set the vertical radius for the shape in concern.
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.
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 Dedicated Developers to give out the best stylesheets and designs for your applications.
|
|
| By Deepa Ranganathan On 25 Sep, 15 Viewed: 835 |
<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan On 06 May 2015 Viewed: 411
Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi On 18 Apr 2015 Viewed: 7,364
To show blurred, faded or washed-out image by using CSS and clear effect on mouse over on the image we need to use simply two CSS opacity and filter: alpha See following image, by default all will be faded on page load and once user will mouse over on any image that will look like the third... By Jason Olivera On 06 Apr 2013 Viewed: 1,881
**1. Universal Selector: *** *{margin:0; padding:0} Most of the designers use * selector to remove the margin and padding, but we should avoid it because it is too heavy. *.class1 and .class are equivalent. *.#content and # content are equivalent. **2. Descendant selectors: X ... By Ali Adravi On 30 Jan 2013 Viewed: 553
As we know CSS styles works from top to bottom, suppose you have created two class with the same name or define the style of any element at two places, which one will apply on your page, can you guess which one will apply, yes you are right the last one because CSS works from top to... By Mike .Net On 28 Jan 2013 Viewed: 487