Frogg logo

Frogg's web tools

Hand Crafted Tools

Home > Coding > CSS3 usefull codes
Welcome on Frogg's web tools | Current date :
11/12/2018

CSS3 usefull codes

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. (source wikipedia)

  • Thoose codes are written by myself for modern browser without using any frameworks and are free to use.
  • To improve website reponse time, you can minify it like with my CSS minifier

CSS3 loader

L
O
A
D
I
N
G
CSScopy to clipboard
@keyframes loader
{
0% { transform:rotateX(0deg); }
50%{ transform:rotateX(+180deg); }
100%{ transform:rotateX(0deg);  }
}

.loader > DIV:nth-child(1){animation: loader 3s 0.7s infinite forwards;}
.loader > DIV:nth-child(2){animation: loader 3s 0.9s infinite forwards;}
.loader > DIV:nth-child(3){animation: loader 3s 1.1s infinite forwards;}
.loader > DIV:nth-child(4){animation: loader 3s 1.2s infinite forwards;}	
.loader > DIV:nth-child(5){animation: loader 3s 1.4s infinite forwards;}
.loader > DIV:nth-child(6){animation: loader 3s 1.6s infinite forwards;}	
.loader > DIV:nth-child(7){animation: loader 3s 1.8s infinite forwards;}

.loader
{
line-height: 16px;
font-weight: bold;
font-family: MavenProLight;
color:#fff;
text-align:center;	
border: 1px solid #2098d1;
padding: 15px;
border-radius: 5px;
display: flex;
margin: auto;
width: 183px;
margin-bottom:50px;
}

.loader > DIV
{
width: 15px;
height: 15px;
transform-style: preserve-3d;
margin:5px;
}

.loader > DIV > DIV
{
position: absolute;
width: 15px;
height: 15px;
backface-visibility: hidden;
background-color: #2098d1;
padding:3px;
border-radius: 3px;
}

.loader .back
{
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #2098d1;
}

HTMLcopy to clipboard
<div class="loader">
	<div>
		<div class="front">L</div>
		<div class="back"></div>
	</div>
	<div>
		<div class="front">O</div>
		<div class="back"></div>
	</div>
	<div>
		<div class="front">A</div>
		<div class="back"></div>
	</div>
	<div>
		<div class="front">D</div>
		<div class="back"></div>
	</div>
	<div>
		<div class="front">I</div>
		<div class="back"></div>
	</div>
	<div>
		<div class="front">N</div>
		<div class="back"></div>
	</div>
	<div>
		<div class="front">G</div>
		<div class="back"></div>
	</div>				
</div>

CSS3 elements

> Scroll bar > progress bar

CSS3 form

> input checkbox > input range

CSS3 3D

Caption text
CSScopy to clipboard
.linkDiv
{
perspective:1000px;
display: inline-block;
text-align:center;
}

.link,.face,.face P
{
width: 180px;
height: 120px;	
}

.link
{
padding:4px 14px;
transform-style: preserve-3d;
transition: all 0.5s linear;
display: table;
}

.links A .front
{
background:#1d861d;
}

.linkDiv:hover .link
{
transform: rotateY(180deg);
}

.linkDiv:hover .caption
{
color:#2098d1;
}

.face IMG
{
width:120px;
height:120px;
border:0;
box-shadow:none;
margin:0;
display:inline;
}

.face
{
position: absolute;
backface-visibility: hidden;
}
.face.front
{
background-color: darkgreen;
box-shadow: 1px 1px 5px 0px #777777;
}

.face.back
{
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
font-size:15px;
}

.face P
{
display: table-cell;
vertical-align: middle;
}

.face.front B
{
color:#fff;
}

.face span
{
font-size: 15px;
padding-left: 45px;	
color:#fff
}

.caption
{
color:darkgreen;
font-size:13px;
margin-left: 20px;	
}

HTMLcopy to clipboard
<a href="#" target="_blank">
<div class="linkDiv">
	<div class="link">
		<div class="front face">
			<p><b>Title</b><br/>
			<span>Subtitle</span></p>
		</div>
		<div class="back face center">
			<img src="inc/img/home/tool.frogg.fr_Logo.png"/>
		</div>
	</div>
	<div class="caption">Caption text</div>
</div></a>
Page created by the 01/10/2016 10:11
Generated in 0.007 sec & displayed in ... sec