Code Snippets

Friday, February 26, 2016

Pure CSS Animations

Sample Text

<div>

<br>

<h4 class="bm-10 center relative-text">Sample Text</h4>

</div>

--------------------------------------------------------------------------------------------------
CSS:
--------------------------------------------------------------------------------------------------
.absolute-img {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.relative-text {
position: relative;
top: 220px;
}
@keyframes rotatecw {
to {
transform: rotate(360deg);
}
}
.rotate-clock-wise {
animation: 2s rotatecw infinite linear;
}
@keyframes rotateaw {
to {
transform: rotate(-360deg);
}
}
.rotate-anticlock-wise {
animation: 4s rotateaw infinite linear;

}

--------------------------------------------------------------------------------------------------
Fiddle:
--------------------------------------------------------------------------------------------------
https://jsfiddle.net/thisisdev4u/9yuowvd4/

Wednesday, February 24, 2016

Vertically Middle Aligned Responsive Square Boxes

--------------------------------------------------------------------------------------------------
External Resources:
--------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------
HTML:
--------------------------------------------------------------------------------------------------
<div class="row auto-margin">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 center colHeight" style="background-color:#2E5262">
<div class="vcenter" style="line-height: normal;">
<p class="font-white bigText">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a class="button" href="#">READ MORE</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 center colHeight" style="background-color:#53A29C">
<div class="vcenter" style="line-height: normal;">
<p class="font-white smallText">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<a class="button" href="#">READ MORE</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 center colHeight" style="background-color:#2683C6">
<div class="vcenter" style="line-height: normal;">
<p class="font-white smallText">Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
<a class="button" href="#">READ MORE</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 center colHeight" style="background-color:#5CB984">
<div class="vcenter" style="line-height: normal;">
<p class="font-white smallText">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p>
<a class="button" href="#">READ MORE</a>
</div>
</div>
</div>

--------------------------------------------------------------------------------------------------
CSS:
--------------------------------------------------------------------------------------------------
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.auto-margin{
margin: 0 auto;
float: none;
}
.font-white{
color: white;
}
.center{
text-align:center;
}
.button{
display: inline-block;
position: relative;
cursor: pointer;
margin: 5px;
border: 2px solid #EEE;
color: #EEE;
text-transform: uppercase;
padding: 0 17px;
height: 34px;
line-height: 30px;
}
.button:hover {
background-color: #EEE;
color: #333;
text-shadow: none;
}

--------------------------------------------------------------------------------------------------
JS/jQuery:
--------------------------------------------------------------------------------------------------
$(document).ready(function(){
var boxWidth=$(".colHeight").width();
$(".colHeight").css({"height":boxWidth, "line-height":boxWidth+"px"});
$(".smallText").height($(".bigText").height());
$(window).resize(function(){
var boxWidth=$(".colHeight").width();
$(".colHeight").css({"height":boxWidth, "line-height":boxWidth+"px"});
$(".smallText").height($(".bigText").height());
});
});

--------------------------------------------------------------------------------------------------
Fiddle:
--------------------------------------------------------------------------------------------------
https://jsfiddle.net/thisisdev4u/yr2grzL7/

Check Mobile Browser/Device (JavaScript)

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// code goes here
}

Pure CSS3 Based Carousel

--------------------------------------------------------------------------------------------------
HTML:
--------------------------------------------------------------------------------------------------
<div class="carousel">
<ul class="panes">
<li class="panes-li">
<img src="http://www.jssor.com/demos/img/home/02.jpg" alt="">
</li>
<li class="panes-li">
<img src="http://wowslider.com/sliders/demo-5/data/images/sweden.jpg" alt="">
</li>
<li class="panes-li">
<img src="http://www.menucool.com/slider/prod/image-slider-5.jpg" alt="">
</li>
<li class="panes-li">
<img src="http://demo.smartaddons.com/extensions/joomla17/cache/mod_sj_content_slider/cc021ca251f443c4a934cba184872eff.jpeg" alt="">
</li>
</ul>
</div>

--------------------------------------------------------------------------------------------------
CSS:
--------------------------------------------------------------------------------------------------
.carousel{
overflow:hidden;
width:100%;
}
.panes{
display: table !important;
list-style:none;
margin:0;
padding:0;
position:relative;
width:400%; /* Number of panes * 100% */
overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */

-moz-animation:carousel 20s linear infinite;
-webkit-animation:carousel 20s linear infinite;
animation:carousel 20s linear infinite;
}
.panes:hover{
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
.panes-li{
display: table-cell !important;
position:relative;
float:left;
width:25%; /* 100 / number of panes */
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}

@-moz-keyframes carousel{
0% { left:0; }
23% { left:0; }
25% { left:-100%; }
48% { left:-100%; }
50% { left:-200%; }
73% { left:-200%; }
75% { left:-300%; }
98% { left:-300%; }
100% { left:0; }
}

@-webkit-keyframes carousel{
0% { left:0; }
23% { left:0; }
25% { left:-100%; }
48% { left:-100%; }
50% { left:-200%; }
73% { left:-200%; }
75% { left:-300%; }
98% { left:-300%; }
100% { left:0; }
}

@keyframes carousel{
0% { left:0; }
23% { left:0; }
25% { left:-100%; }
48% { left:-100%; }
50% { left:-200%; }
73% { left:-200%; }
75% { left:-300%; }
98% { left:-300%; }
100% { left:0; }

}

--------------------------------------------------------------------------------------------------
Fiddle:
--------------------------------------------------------------------------------------------------
https://jsfiddle.net/thisisdev4u/98ddhqof/