The following code doesn't work. I want to predefine the :before and :after to be used in everywhere in the code.
&:after, &:before{
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
.myclass:after{background-color:red;}
But the following code works:
.myclass:after{background-color:red;
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
What am I doing wrong in defining it?
Thanks.
* not(&) is the selector for "all"
*::after, *::before{
content:"";
display:block;
width:100%;
height:100%;
border-radius:50%;
}
& is used in SASS (and probably other pre-processors) to attach selectors like:
.test {
&::after, &::before { // renders to .test::after, .test::before
content:"";
display:block;
width:100%;
height:100%;
border-radius:50%;
}
}
Related
I'm going to write in the form, when it's one word.
But if it's more than two letters, I'll write like this.
Can I make this shape?
count{
position:relative;
color:white;
margin:0.5em;
}
count:before{
content:'';
min-width:1em;
position:absolute;
left:-0.5em;
right:-0.5em;
top:-0.2em;
bottom:-0.2em;
background-color:blue;
z-index:-4;
border-radius:1em;
}
<count>100</count>
<count>5</count>
<count>100.000</count>
Try this
You can achieve this kind of shape using border radius.
Get more info.
Border Radius
<h2 class="number">5</h2>
<h2 class="text">99+</h2>
and use this css
.number{
background:blue;
border-radius:50%;
padding:5px;
width:50px;
height:50px;
text-align:center;
line-height:50px;
color:white;
}
.text{
background:blue;
border-radius:25px;
padding:25px;
text-align:center;
line-height:25px;
color:white;
}
I've been working on my donation website and I've come to find an issue where the default Buycraft css is taking over the css that I'm writing. I'm extremely new to css and I don't plan on doing it much in the future but for now I need help.
When I inspect element my navbar it gives me a few variables for .navbar .nav > li > a such as a color and a text shadow. I've tried to re-write the code for the text and it's to no avail. I copied it exactly like what inspect element has and I gave the variables !important but nothing changes. If anyone can tell me whats wrong with the navbar button text please help me out.
My website.
Code:
#import "http://fonts.googleapis.com/css?family=Oswald:400,300";
body {
background:url(http://i.imgur.com/tYtIxao.jpg?1);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
padding:0;
margin:0;
height:100%
}
.navbar {
background:#11CFD9;
position:fixed;
font-family:"Oswald";
top:0;
left:-5px;
right:-5px;
background-color:#11CFD9;
color:#000!important;
box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
text-align:center;
height:80px;
display:block;
padding-left:5%;
padding-right:20%;
z-index:10
}
.navbar-inner {
background:#11CFD9;
position:fixed;
font-family:"Oswald";
top:0;
left:-5px;
right:-5px;
background-color:#11CFD9;
font-size:x-large;
text-align:center;
display:block;
padding-top:30px;
padding-bottom:30px;
padding-left:5%;
padding-right:20%;
z-index:10
}
.navbar .nav>li>a {
float:none;
padding:10px 15px;
color:#000!important;
text-decoration:none;
text-shadow:0 0 0 #fff!important
}
.nav > li > a {
display:block;
color:#000!important
}
a {
color:#08c;
text-decoration:none
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
color:#fff;
height:auto;
text-decoration:none;
background-color:#11CFD9;
-webkit-box-shadow:inset 0 0 0;
-moz-box-shadow:inset 0 0 0;
box-shadow:inset 0 0 0
}
ul.nav a:hover {
color:#fff!important;
background:#1CDBE6
}
.box-container .basket-dropdown {
padding:20px;
margin-left:-145px;
margin-top:2px
}
.basket-dropdown .checkout {
float:right
}
.checkout {
z-index:9999;
font-family:Oswald;
font-weight:300
}
.row {
margin-left:20px;
margin-right:20px
}
.box-container .checkout {
width:98%!important;
float:none!important
}
.span11 {
width:98%;
float:none!important
}
.box {
background:url();
border:0!important;
margin-top:130px;
position:relative;
padding-right:25px;
padding-left:25px;
width:100%
}
.box-container {
font-family:Oswald;
font-weight:300;
margin-right:5px;
margin-left:5px
}
.box-container .checkout {
width:90%;
position:relative;
float:left;
z-index:0;
top:0
}
.box-container .header {
background-image:url(http://i.imgur.com/PzVJZ4V.png);
background-color:#fff;
border-top-left-radius:1px;
border-top-right-radius:1px;
-webkit-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-border-radius-topright:5px;
-border-radius-topleft:5px;
height:33px;
text-align:left;
text-transform:uppercase;
font-size:25px;
padding-top:20px;
font-family:Oswald;
font-weight:300;
border-radius:5px 5px 0 0
}
.box-container .content {
opacity:.9!important
}
.span7 {
width:60%;
margin-left:20px;
border-radius:10px
}
.span4 {
width:25%;
height:15%
}
.clear-fix {
z-index:9999;
top:0;
opacity:.9
}
.logo {
background:url();
background-repeat:no-repeat;
float:none;
z-index:9999;
position:fixed;
left:25%;
height:0!important;
width:0!important
}
.logo span {
opacity:0;
color:#fff;
font-size:0
}
em {
color:red;
font-weight:700;
font-style:normal
}
/*Spinny Heads*/
.image {
display:block;
text-decoration:none;
-webkit-transition:.5s all ease-in-out;
-moz-transition:.5s all ease-in-out;
-o-transition:.5s all ease-in-out;
transition:.5s all ease-in-out
}
.image:hover {
-webkit-transform:rotate(720deg) scale(1.5);
-ms-transform:rotate(720deg) scale(1.5);
-moz-transform:rotate(720deg) scale(1.5);
-o-transform:rotate(720deg) scale(1.5);
transform:rotate(720deg) scale(1.5)
}
.footer {
height:60px;
border-top:1px solid #000;
background:orange;
bottom:0;
margin-right:0;
margin-bottom:0;
width:100%;
z-index:99999;
position:static;
font-family:"Oswald";
left:-5px;
right:-5px;
background-color:#11CFD9;
color:#000!important;
box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
text-align:center;
display:block
}
The browser decides which css selector is applied over the others depending on its weight. Usually you will find the term CSS specificity describing this.
In your case the .nav > li > a is interpreted to have a very low weight and is therefore overridden by your default stylesheet.
If you remove the > symbols in those selectors it should still be the same result - since there are no nested a elements in the navigation bar you want to exclude, right?
The selector .nav li a has a bigger weight and should therefore take precedence. If that still does not help, please include the css-selector from your Buycraft css file, which is overriding your selector. So we can look at the specific weight of both in comparison.
Have a look at this answer here for another example.
A little background: the css specificity exists in order to make things like the following possible: Imagine, the links on your website should always be displayed in blue. But in your navigation, they should be black.
a { color: blue; }
.navbar a { color: black; }
Since the second selector is more specific, it takes precedence over the general links-are-blue selector and your navigational links are black.
I am trying to create the 'Google Now' microphone icon using pure CSS3.
The icon features a white microphone on a red circular background.
I tried font-awesome but in vain
I need your help to complete this task
No animations or functionality, just the icon
Google Now Icon Only with CSS
DEMO
output :
HTML :
<div class="gn"><div class="mc"></div></div>
CSS :
body{font-size: 15px;}
.gn{
position:relative;
margin: 5% auto;
background-color:#FE2222;
border-radius:50%;
width:10em; height:10em;
}
:before, :after{
content:'';
position:absolute;
background-color:#fff;
}
.gn:after{
top:30%; left:43%;
height:15%; width:14%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.gn:before{
top:40%; left:43%;
height:15%; width:14%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
.mc{
position:absolute;
top:50%; left:37%;
height:24%;
width:26.5%;
overflow:hidden;
}
.mc:before{
bottom:50%;
width:100%; height:100%;
box-sizing:border-box;
border-radius:50%;
border:0.5em solid #fff;
background:none;
}
.mc:after{
top:50%; left:40%;
width:20%; height:25%;
}
Demo
html
<div class=container><i class=icon-microphone></i></div>
css
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
* {
margin:0;
padding:0;
}
.container {
width:150px;
background-color:#e74c3c;
display:block;
margin:100px auto 0px auto;
border-radius:100%;
box-shadow:0px 0px 15px 2px #bdc3c7;
cursor:pointer;
transition:.3s all ease-in;
position:relative;
}
.icon-microphone {
color:white;
font-size:60px;
line-height:150px;
display:block;
text-align:center;
transition:.1s all ease-in;
}
.container:hover {
background-color:#27ae60;
}
.container:active {
background-color:#e74c3c;
}
.container:active .icon-microphone {
color:#ecf0f1;
}
Is it possible to display:block; the :after pseudo-element when I hover over the parent element itself?
#myDiv{
position:relative;
width:50px;
height:50px;
border-style:solid;
background-color:red;
}
#myDiv:after{
position:absolute;
content:"";
display:none;
width:50px;
height:50px;
border-style:solid;
background-color:blue;
}
I have tired:
#myDiv:hover #myDiv:after{
display:block;
}
#myDiv:hover + #myDiv:after{
display:block;
}
#myDiv:hover > #myDiv:after{
display:block;
}
Yet no luck, here's a fiddle.
Change it to #myDiv:hover::after
You can use either :after or ::after but in the selectors module (3) it states that the latter is now intended to be used to distinguish them from pseudo-classes
You are trying to reference the same element, so you don't need to duplicate the ID selector. No need to use the child selector either, just use:
#myDiv:hover:after {
display: block;
}
jsFiddle Demo
How can I make a background like the attached image in css? I have experimented with border so that I can give it a shape like the black part, but in that case I cannot write text so I guess border shapes of parallelogram will not work any other ideas?
You can write like this:
CSS
.tab{
width:200px;
height:40px;
position:relative;
background:#000;
}
.tab:after{
content:'';
right:-40px;
top:0;
position:absolute;
width:0;
height:0;
border-width:20px;
border-color: transparent transparent #000 #000;
border-style:solid;
}
Check this http://jsfiddle.net/696Sb/
Y0u can also use css3 transform for this. Write like this:
.tab:after{
content:'';
right:-30px;
top:10px;
position:absolute;
width:60px;
height:60px;
background:#000;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
Check this http://jsfiddle.net/696Sb/1/
Here are 2 tutorials to make diagonal/triangle in CSS:
How to Create Diagonal Lines with CSS
CSS triangle
Do you want to be able to write under the uppermost black horizontal line (on left, left of the diagonal)?
Hey now you can do this use after and before properties in css as like this
HTML
<div class="shape"></div>
Css
.shape{
background:#000;
margin:40px 20px;
height:100px;
width:700px;
position:relative;
}
.shape:after{
content:'';
position:absolute;
top:-20px;
right:0;
height:20px;
border-left:solid 30px #000;
border-right:transparent 30px solid;
border-top:transparent 20px solid;
}
.shape:before{
content:'';
position:absolute;
top:-20px;
left:0;
right:60px;
height:20px;
background:#000;
}
Live demo http://jsfiddle.net/uuxd8/
Updated
Live demo two http://jsfiddle.net/uuxd8/1/