Frogg's web tools

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)

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>

> Scroll bar > progress bar

> input checkbox > input range

Title
Subtitle

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>