I want to know is it possible to add some flexibility to css via this:
<div class='round5'></div>
where .round
is a class with round corners and '5' determines the amount of radius. Is it possible? I have seen some where, but I don't know how the implementation takes place.
you can do this. but you have to create the css in the html document(not linked, but between the <style> tag). you can use php or javascript to make a loop.
In general, you declare a custom variable by using a custom property name that begins with a double hyphen -- , and a property value that can be any valid CSS value. Using var() allows us to insert the value of custom property (variable).
CSS can insert text content before or after an element. To specify this, make a rule and add ::before or ::after to the selector. In the declaration, specify the content property with the text content as its value.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class.
<div class="round" style="--radius: 100%;"></div> <style> .round { display: block; height: 40px; width: 40px; border: 1px solid #BADA55; border-radius: var(--radius); } </style>
You can also define root variables and pass them in as well
<div class="round" style="--radius: var(--rad-50);"></div> <style> :root { --rad-0: 0%; --rad-50: 50%; --rad-100: 100%; } .round { display: block; height: 40px; width: 40px; border: 1px solid #BADA55; border-radius: var(--radius); } </style>
This is also scoped to the element as well. If you set the --radius
in one element is wont effect another element. Pretty jazzy right!
You can't define the border radius separate from its value because it's all one property. There's no way to tell an element to have rounded corners "in general" without also specifying how much to round them by.
However, you can do something kind of similar with multiple classes and different properties:
HTML:
<div class="rounded blue"></div> <div class="rounded green"></div>
CSS:
.rounded { border-radius: 5px; } .blue { background: blue; } .green { background: green; }
The .rounded
class adds the border radius and the .blue
and .green
classes add the background color.
(I like to name and order the classes such that they read logically, like <div class="large box"></div>
, etc.).
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