Sorry if the question is not really relevant, I'm french and I don't know the right terms of what I am asking exacly :)
Here is the 'thing' (module?) I've created to create a circle.
.fake-avatar {
width: 70px;
height: 70px;
}
But I want to outline this one without creating this :
.fake-avatar-outline {
width: 72px;
height: 72px;
}
Here is where I use it :
.fake-avatar-outline.rounded.flex-center.b-success.m-auto.bg-pink
.fake-avatar.rounded.flex-center.b-success.text-xl.m-auto.bg-pink-light.icon-star
so the goal is to have only fake-avatar and change manually the size. How is it possible? Should I do something like that :
.fake-avatar.rounded.flex-center.b-success.m-auto.bg-pink(width='72px')
.fake-avatar.rounded.flex-center.b-success.text-xl.m-auto.bg-pink-light.icon-star
Thank you,
Nicolas
If I am understanding this correctly you are looking for a border
.fake-avatar {
width: 70px;
height: 70px;
/* Add this*/
border: 2px solid #FFF; /* color can go here */
/* If you wanted a circle */
border-radius: 50%;
}
EDIT: As stated in the comments, the poster was also looking for a way to change the width of the element without having to change the class in the css file. I said he could use inline-styles.
<div class="fake-avatar" style="width: 72px"></div>
I also noted that setting styles this way is usually frowned upon as it makes css maintenance a nightmare.
Expanding on #DavidLee's answer, here a snippet with running code for both options.
.fake-avatar {
width: 70px;
height: 70px;
border: 2px solid white;
border-radius: 50%;
background-color:blue;
}
.fake-avatar-outline {
width: 70px;
height: 70px;
border: 1px solid red;
border-radius: 50%;
}
<div class="fake-avatar"></div>
<div class="fake-avatar-outline"></div>
Related
my problem seems to be quite simple. I want to create the button which is png and has hover via .png also. I need this for email campaigns becouse Outlook doesn't understand some css attributes.
I tried make it simple
.button {
border: none;
background: url(/image1.png);
}
.button:hover {
border: none;
background: url(/image2.png);
}
And everything is just white. Any help will be great :)
according to documentation, you should do it like that,
background: url("/image1.png");
.button {
width: 50px;
height: 50px;
border: none;
background: url("https://i.stack.imgur.com/teLso.jpg?s=48&g=1");
}
.button:hover {
border: none;
background: url("https://graph.facebook.com/160520007817300/picture?type=large");
}
<button class="button"></button>
You have an error, use the simple, or double quotes "" - '', an example:
button{
background: url('https://s-media-cache-ak0.pinimg.com/736x/24/fe/e1/24fee13b4dc475c435984ab0aa1b8ecb.jpg');
background-size: 500px 100px;
background-position: center;
width: 500px;
height: 40px;
}
<button> Example button </button>
Same with any of the other html elements.
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.
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.).
Here is an answer that I came up with that requires a small amount of jQuery, and a small knowledge of Regex.
$(function() {
var number = $("div").attr("class").match(/\d+$/);
$("div").css({
"width": "100px",
"height": "100px",
"background-color": "green",
"border-radius": number + "px"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>
The .match() function uses Regex. Regex is used to detect parts of strings. The \d detects any digits. The + matches the previous selector 1 or more times. In other words, the number can be a multi digit number. And the $ means it has to be at the end.
So then the jQuery uses that in the border-radius property later. All you have to do is append px, and you are good to go.
Fiddle
You could do something similar but not exactly the way you've put it.
CSS
.radius{
border-radius: 10px;
border: 1px solid red;
}
.r5{
border-radius:5px;
}
HTML
<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>
Working Example
In the example above the red border will be retained but the border-radius will change.
Note that you don't start class names with numbers, hence r5 rather than 5
You can use multiclassing on the element. Eg.:
HTML:
<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>
CSS:
.round {
border: 1px solid #000;
width: 100px;
height: 100px;
}
.round.rounded-5 {
border-radius: 5px;
}
.round.rounded-10 {
border-radius: 10px;
}
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. for example try this:
<style>
<?php
$round = 5;
for ($round = 50; $round <= 150; $round+=25){
echo "#round$round{
height: 300px;
width: 300px;
background: #f00;
border-radius : ".$round."px;
margin: 2px;
}
";
}
?>
</style>
<?php
for ($round=50;$round<=150; $round+=25){
echo "<div id='round$round'>
</div>
";
}
?>
hope this helps! :D
Maybe what you want is like this
CSS
.round {
border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
border-radius: 5px;
}
.round.ten {
border-radius: 10px;
}
HTML
<div class="round five">something</div>
You can do what you are saying but you would have to reserve the keyword "round" for only this purpose. If you look at the following.
div[class*="round"] {
background-color: green;
color: white;
padding: 10px;
}
And then targeting specific variants of it using...
div[class="round5"] {
border-radius: 5px;
}
The first block of code selects all class names which contain the word round, this can be both a good thing and a bad thing.
Sorry if the question is a little vague, I found it quite hard to title. Anyway, I am currently creating a new design and I have hit an issue, I basically want one div to start underneath another, as I am using rounded edges on the div before and want to cover up the whitespace.
I am able to get the div to underlay, however when I set the z-index it becomes the bottom element and the interaction with links etc can't be done. (e.g links can't be clicked, can't highlight text)
To better explain, I have created this JSFiddle link, it shows exactly what I am trying to do. Try clicking the link, it will simply not work.
The code on the JSFiddle is as follows:
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}
Any help is appreciated, and if you would like me to clarify anything please do ask.
Thanks,
Jake
Demo http://jsfiddle.net/Amn7S/
Dont use z-index:-1; use z-index:1; and z-index:2; then it works.
#div-1 {
background-color: grey;
z-index:2;
position:relative;
}
#div-2 {
background-color: black;
position: relative;
margin-top:-25px;
z-index:1;
}
instead using z-index-1; you should use positive z-index and tell each div where to stand.
http://jsfiddle.net/wdQWu/3/
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
position:relative;
z-index:1;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: 0;
margin-top:-26px;
}
oups, little late, answer already there :)
You could change the z-index of the link to be above the 2nd div
something like this maybe ?
http://jsfiddle.net/wdQWu/1/
I've used a div with a class wrapper as you can see in the code.
.wrapper {
width: 350px;
border-radius: 0 0 16px 16px;
background-color: black;
}
Hope it's useful..
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
I have a box defined that works for most of my site:
.searchBox
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
But I have one box that needs to be a little bigger; it has to be height: 220px.
I know I could duplicate the above, calling it, say searchBoxLarge, put that on my div tag, and be done. But that's duplicate code that I don't want.
This might be a 'dumb question', but I'm not trained in CSS and looking for assistance...
What is the format to specify the searchBoxLarge with the height: 220px, but without duplicating the entire searchBox entry?
Add searchBoxLarge to the searchBox declaration, and then make a separate declaration for just searchBoxLarge which overwrites the height value.
.searchBox, .searchBoxLarge
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
.searchBoxLarge
{
height: 220px;
}
There was a good article about doing this on SitePoint http://www.sitepoint.com/first-look-object-oriented-css/
I would suggest you read the responses to the article since there are some drawbacks to doing your CSS like this, and also some benefits.
I agree the name Object Oriented CSS is misleading because there is no true sub-typing
Cheers! Orin