Jump to content

CSS what is this formula called?


chef

Recommended Posts

chef

The more I learn CSS the more I'm starting to understand it.

 

However, I do have a question.

 

I understand ":before" and ":after" pseudo elements. But lately I've been seeing something like this:

 

".header:before, .header:after, .header i, .header i:before, .header i:after { }"

 

Does this allow me to break the element styling up even more then just before and after?

 

 

 

On my login page I have only a certain amount of room to work with my server logo. It looks like:

 

"HOMEMEDIASERVERONLINE"

 

I'm able to break the two colors up by using ":before", and ":after".

 

when I use @keyframes to animate my style, I can animate each part of the logo, but the animations happen at the time.

 

If I put a delay in my second animation (fading in the word "ONLINE") then the animation will happen, but the element is visible prior to it. This is not ideal and I would like it to invisible prior to fading in.

 

I can't actually target the visibility value without it changing the entire element.

 

If I use this technic of ".header i", will this help me?

 

This is my code anyway:

.visualLoginForm h1:before{
content: "HOMEMEDIASERVER" !important;
visibility: visible;
float:left;
font-size: 150%;
font-weight:lighter;
border-left: 3px solid rgba(82,181,75,225);
padding-left:10px;
animation-name: omgwtfbbq;
	animation-duration: 1.5s;
}

.visualLoginForm h1:after{
content: "ONLINE" !important;
visibility:visible;
opacity:0%;
font-size: 150%;
font-weight:bold;
float:left;
color:#52B54B;
animation-name:fadein;
animation-duration: 2s;
animation-delay: 1.5s;
}

I hope I have explained my question properly.

 

Many thanks!

 

Ben

Edited by chef
Link to comment
Share on other sites

chef

Must be referring to an "i" (icon) element in the header.

 

Oh well moving on!

Link to comment
Share on other sites

In general you want to use css for style and appearance. It only has limited ability for content insertion such as this.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...