CSS JQuery: December 2014

Wednesday, December 31, 2014

CSS arrow positioning.

<style type="text/css">

.home-link-left,.home-link-right {
vertical-align: middle;
margin: auto;
width: 35vmin;
height: 12vmin;
border: 0.7vmin outset #232323;
background-color: #606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color: white;
position: relative;
}
.home-link-left {
border-radius: 20px 0px 0px 20px;
left: 0px;
border-right: 0px solid transparent;
}
.home-link-right {
border-radius: 0px 20px 20px 0px;
right: 0px;
border-left: 0px solid transparent;
}
.home-link-left:before,
.home-link-right:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
border-bottom: 6vmin solid transparent;
border-top: 6vmin solid transparent;
vertical-align: middle;
display: block;
}
.home-link-container {
width: 45vmin;
height: 13vmin;
margin: auto;
vertical-align: middle;
}
.home-link-left:before {
border-left: 4vmin solid red;
right: -4vmin;
}
.home-link-right:after {
border-right: 4vmin solid red;
left: -4vmin;
}
.home-link-image {
border: 0.7vmin outset #333333;
vertical-align: middle;
margin-top: -10%;
margin: auto;
width: 35vmin;
height: 25vmin;
border-radius: 20px;
}

</style>

<table id="home-table">
<tr>
<td>
<div class="home-link-container">
<div class="home-link-left">
<a href="#"></a>
</div>
</div>
</td>
<td>
<div class="home-link-image"></div>
</td>
</tr>
<tr>
<td>
<div class="home-link-image"></div>
</td>
<td>
<div class="home-link-container">
<div class="home-link-right">
<a href="#"></a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="home-link-container">
<div class="home-link-left">
<a href="#"></a>
</div>
</div>
</td>
<td>
<div class="home-link-image"></div>
</td>
</tr>
</table>

Output :)

Tuesday, December 30, 2014

Select first element of the same class.

<style type="text/css">

.group .element:first-child {
color: red;
}

div{
font-size: 25px;
font-weight: bold;
font-family: verdana;
}

</style>

<div class="group">
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
</div>

<div class="group">
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
</div>

<div class="group">
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
<div class="element">CSS Tution</div>
</div>

Output :)

Saturday, December 27, 2014

Insert a circle between li's.

<style type="text/css">

li {
list-style: none;
display: inline-block;
position: relative;
}

.nav-container {
top: 20px;
position: absolute;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
left: 0;
}
.nav {
width: 100%;
height: 40px;
maring: 0 auto;
text-align: center;
line-height: 20px;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.menu-item {
display: inline-block;
width: 50px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: #777777;
margin-left: 6px;
margin-right: 6px;
}
.menu-item:not(:first-child)::before {
content: "";
position: absolute;
left: -13px;
top: 15px;
width:8px;
height:8px;
border:2px solid red;
border-radius:10px;
}
.menu-item:hover {
background-color: black;
cursor: pointer;
border-radius: 2px;
}

</style>

<body>

<div class="nav-container">
<ul class="nav">

<li id="menu-item-1" class="menu-item">Item 1</li>
<li id="menu-item-2" class="menu-item">Item 2</li>
<li id="menu-item-3" class="menu-item">Item 3</li>
<li id="menu-item-4" class="menu-item">Item 4</li>
<li id="menu-item-5" class="menu-item">Item 5</li>
</ul>
</div>

</body>

Output :)

Push div to the right on opening menu using jQuery.

<style type="text/css">

.buttonMenu {
font-family:verdana;
font-weight:bold;
width:100%;
padding:10px;
background-color:rgba(0, 0, 0, 0.9);
border:0px;
color:white;
}

.buttonMenu:hover {
font-family: verdana;
font-weight: bold;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 1);
border: 0px;
color: white;
}

.buttonMenu:focus {
outline: 0;
}

#showmenu {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
font-weight: bold;
padding: 5px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
font-family: Arial;
color: white;
position: fixed;
top: 45%;
left:0;
border-width: 2px;
border-style: solid;
border-color: black;
border-left-width: 0;
}

#showmenu:hover {
color: black;
background-color: white;
}

#menu {
display: block;
border: 0;
border-right-width: 2px;
border-style: solid;
border-color: rgba(0, 0, 0, 1);
top: 0;
left: -302px;
height: 100%;
width: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
}

#accountDetails {
text-align: center;
font-family: verdana;
color: white;
padding: 15px;
height: 100px;
width: 270px;
background-color: rgba(0, 0, 0, 0.4);
}

#profilePic {
vertical-align: middle;
border-radius: 15px;
border-width: 4px;
border-style: solid;
border-color: rgba(25, 120, 0, 5);
}

.black {
background-color: black;
color: black;
height: 2px;
border: 0;
}

</style>

<script src="jquery-1.11.1.min.js"></script>

<div id="menu">
<div id="accountDetails">
<img id="profilePic" width="100px" height="100px" src="">Account name
</div>
<hr class="black">
<button class="buttonMenu">HOME</button>
<button class="buttonMenu">Profile</button>
<button class="buttonMenu">Friends</button>
<button class="buttonMenu">Log out</button>
</div>

<div id="showmenu">M<br>E<br>N<br>U</div>

<script type="text/javascript">

$(document).ready(function () {
var cnt = 0;
$('#showmenu').click(function () {
if (cnt % 2 == 0) {
$('#menu').animate({'left': '-2px'});
$('#showmenu').animate({'left': '300px'});
} else {
$('#menu').animate({'left': '-302px'});
$('#showmenu').animate({'left': '0px'});
}
cnt++;
});
});

</script>

Output :)

1)

Wednesday, December 24, 2014

Text inside a div to align both vertically and horizontally.

<style type="text/css">

html, body{
height:100%;
width:100%;
margin: 0 auto;
}
#dvTxt{
background-color:#33b5e5;
height:100%;
width:100%;
text-align: center;
vertical-align: middle;
font-family: verdana;
font-size: 25px;
}
p {
position: relative;
top: calc(50% - 1em);
}

</style>

<div id="dvTxt">
<p>This is my text. I want it to be centered vertically</p>
</div>

Output :)

Tuesday, December 23, 2014

Text overlaying image inside a div with a background image.

<style type="text/css">

section {
background: url("http://subtlepatterns.com/patterns/symphony.png") repeat;
height: 1000px;
position: relative;
}
div.block {
position: absolute;
padding: 10px;
}
img {
position: absolute;
top: 0;
width: 100%;
}

</style>

<section>
<img src="http://img2.tvtome.com/i/u/ac51b5ad45b24475c4667f74aefdc9a5.png">
<div class="block">
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</div>
</section>

Output :)

Monday, December 22, 2014

Add Animation to jQuery Content Tabs.

<style type="text/css">

#tabs-bar {
background: #f0f0f0;
padding:10px 8px;
}

#tabs-bar ul {
display: block;
list-style: none;
float: left;
}

#tabs-bar ul li {
list-style: none;
display: block;
float: left;
padding-right: 10px;
}

#tabs-nav li a {
list-style: none;
display: block;
padding:10px 15px;
background: #c0c0c0;
font-size: 16px;
font-weight: 300;
color: #fff;
text-align: left;
border-top:1px solid #ececec;
border-right:1px solid #ececec;
border-bottom:1px solid #ececec;
border-left:1px solid #ececec;
border-radius: 5px;
text-decoration: none;
}

#tabs-nav li a.current, #tabs-nav li a:hover {
border-bottom:0px solid #ececec;
background: #ee3636;
}

#tabs-content-wrap {
background: #f6f6f6;
padding: 10px;
margin-top: 8px;
}

#tabs-content-wrap ul {
display: block;
list-style: none;
}

#tabs-content-wrap ul li {
width: 100%;
list-style: none;
display: block;
list-style: none;
}

.tab-content {
border-radius: 2px;
padding-bottom: 20px;
}

</style>

<script src="jquery-1.11.1.min.js"></script>

<div id="tabs-bar">
<ul id="tabs-nav">
<li><a id="one" href="#th-tab-one">TAB ONE</a>
</li>
<li><a id="two" href="#th-tab-two">TAB TWO</a>
</li>
<li><a id="three" href="#th-tab-three">TAB THREE</a>
</li>
</ul>
<div style="clear:both;"></div>
</div>



<div id="tabs-content-wrap">
<ul>
<li id="th-tab-one" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</li>


<li id="th-tab-two" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</li>


<li id="th-tab-three" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</li>

</ul>
</div>

<script type="text/javascript">

$(function () {
$('.tab-content:not(:first)').hide();
$('#tabs-nav a').bind('click', function (e) {
e.preventDefault();
$this = $(this);
$target = $(this.hash);
$('#tabs-nav a.current').removeClass('current');
$('.tab-content:visible').slideUp("slow", function () {
$this.addClass('current');
$target.slideDown("slow");
});
}).filter(':first').click();
});

</script>

Output :)

1)

Sunday, December 21, 2014

Use Thumbnail Image instead of radio button with CSS.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

label > input{ /* HIDE RADIO */
display:none;
}

label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}

label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
border:2px solid #f00;
}

</style>
</head>
<body>

<label>
<input type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>

<label>
<input type="radio" name="fb" value="big"/>
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>

<label>
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://placehold.it/40x40/35d/fff&text=f">
</label>

<label>
<input id="fb4" type="radio" name="fb" value="long" />
<img src="http://placehold.it/60x15/35d/fff&text=f">
</label>

</body>
</html>

Output :)

1)

Friday, December 19, 2014

Easing CSS zoom effect.

<style type="text/css">

.big {
position: relative;
width: 70px;
height: 70px;
border-radius: 100px;
background-color: black;
margin: 200px;
-webkit-animation: zoomOut 1s 1;
animation: zoomOut 1s 1;
}
.small {
position: absolute;
width: 60px;
height: 60px;
border-radius: 100px;
background-color: gray;
margin-top: 5px;
margin-left: 5px;
text-align: center;
line-height: 68px;
color: white;
}
.big:hover {
cursor: pointer;
-webkit-animation: zoomIn 1s 1;
animation: zoomIn 1s 1;
-webkit-transform: scale(1.30);
transform: scale(1.30);
}
.small:hover {
cursor: pointer;
-webkit-animation: bounceHover 0.4s 1;
animation: bounceHover 0.4s 1;
}
body {
background-color: lightblue;
}
@-webkit-keyframes zoomIn {
0% {
transform: scale(1);
}
10% {
transform: scale(1.4);
}
20% {
transform: scale(1.3);
}
30% {
transform: scale(1.35)
}
40% {
transform: scale(1.3);
}
50% {
transform: scale(1.3);
}
}
@keyframes zoomIn {
0% {
transform: scale(1);
}
10% {
transform: scale(1.4);
}
20% {
transform: scale(1.3);
}
30% {
transform: scale(1.35)
}
40% {
transform: scale(1.3);
}
50% {
transform: scale(1.3);
}
}
@-webkit-keyframes bounceHover {
0% {
line-height: 68px;
}
20%{
line-height: 65px;
}
40%{
line-height: 71px;
}
60%{
line-height: 65px;
}
80%{
line-height: 71px;
}
100%{
line-height: 68px;
}
}
@keyframes bounceHover {
0% {
line-height: 68px;
}
20%{
line-height: 65px;
}
40%{
line-height: 71px;
}
60%{
line-height: 65px;
}
80%{
line-height: 71px;
}
100%{
line-height: 68px;
}
}
@-webkit-keyframes zoomOut {
0% {
transform: scale(1);
}
10% {
transform: scale(1.20);
}
20% {
transform: scale(1.05);
}
30% {
transform: scale(1.15)
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.1);
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
10% {
transform: scale(1.20);
}
20% {
transform: scale(1.05);
}
30% {
transform: scale(1.15)
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.1);
}
}

</style>

<div class="big">
<div class="small">
<img src="camera.png" />
</div>
</div>

Output :)

1)

Width transition - select the transition direct for increase and decrease width using jQuery.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<style type="text/css">

div {
background-color: #33b5e5;
position: relative;
left: 0;
height: 100px;
width: 0;
transition: all 0.3s linear;
}
.show {
transition-property: width;
left: 0;
width: 200px;
}
.hide {
transition-property: width, left;
width: 0;
left: 200px;
}

</style>

<div></div>
<button type="button" id="btnShow">Show</button>
<br />
<button type="button" id="btnHide">Hide</button>

<script type="text/javascript">

$(document).ready(function() {
$("#btnShow").click(function() {
$("div").removeClass("hide").addClass("show");
});
$("#btnHide").click(function() {
$("div").removeClass("show").addClass("hide");
});
});

</script>

Output :)

1)

Thursday, December 18, 2014

Typing animated text using jQuery.

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
.writer{
font-size: 30px;
color: red;
font-weight: bold;
font-family: verdana;
}
</style>

<script src="jquery-1.11.1.min.js"></script>
</head>

<body>
<div id="container">
<div class="writer">Hi! My name is MaHiii. Welcome to CSS Tution.</div>
</div>
</body>

<script type="text/javascript">

var $el = $('.writer'),
txt = $el.text(),
txtLen = txt.length,
timeOut,
char = 0;

$el.text('|');

(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function() {
char++;
var type = txt.substring(0, char);
$el.text(type + '|');
typeIt();

if (char == txtLen) {
$el.text($el.text().slice(0, -1)); // remove the '|'
clearTimeout(timeOut);
}

}, humanize);
}());

</script>
</html>

Output :)

1)

Wednesday, December 17, 2014

Crossfade two images repeatedly after showing for some seconds.

<style type="text/css">

#container {
float: right;
height: 246px;
position:relative;
width: 230px;
}

#container img {
height: 246px;
width: 230px;
left:0;
opacity: 0;
position:absolute;
}

#container img.bottom {
opacity: 1;
}

#container img.top {
-webkit-animation: crossFade 5s infinite;
-moz-animation: crossFade 5s infinite;
-ms-animation: crossFade 5s infinite;
-o-animation: crossFade 5s infinite;
animation: crossFade 5s infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-ms-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}

@-webkit-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}

@-moz-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}

@-ms-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}

@-o-keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}

@keyframes crossFade {
0% {
opacity: 0;
}
47.62% {
opacity: 0;
}
52.38% {
opacity: 1;
}
100% {
opacity: 1;
}
}

</style>

<div id="container">
<img class="bottom" src="fff.png">
<img class="top" src="mmm.png">
</div>

Output :)

1)

Monday, December 15, 2014

Creating a sparkle effect using CSS.

<style type="text/css">

body {
background: url(teeth.png) no-repeat black 0% 0%;
}

svg {
position: absolute;
-webkit-transform: translate(102%, 350%);
transform: translate(102%, 350%);
}

.group {
-webkit-transform: translate(42.5px,42.5px);
-moz-transform: translate(42.5px,42.5px);
transform: translate(42.5px, 42.5px);
}

path {
-webkit-transform: translate(-42.50px,-42.50px);
-moz-transform: translate(-42.50px,-42.50px);
transform: translate(-42.50px,-42.50px);
}

.large {
-webkit-animation: large 2.5s infinite;
-moz-animation: large 2.5s infinite;
}

.large-2 {
-webkit-animation: large-2 2.5s infinite;
-moz-animation: large-2 2.5s infinite;
}

.small {
-webkit-animation: small 2.5s infinite;
-moz-animation: small 2.5s infinite;
}

@-webkit-keyframes large {
0% {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}

@-moz-keyframes large {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(360deg) scale(1.5);
}
}

@-webkit-keyframes large-2 {
0% {
opacity: 0;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(405deg) scale(1.1);
transform: rotate(405deg) scale(1.1);
}
}

@-moz-keyframes large-2 {
0% {
opacity: 0;
transform: rotate(45deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(405deg) scale(1.1);
}
}

@-webkit-keyframes small {
0% {
opacity: 0;
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: rotate(-360deg) scale(1);
transform: rotate(-360deg) scale(1.5);
}
}

@-moz-keyframes small {
0% {
opacity: 0;
transform: rotate(0deg) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(-360deg) scale(1.5);
}
}

</style>

<svg width="100" height="100" viewBox="0 0 100 100">
<g class="group" opacity="0.8">
<g class="large">
<path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
</g>
<g class="large-2" transform="rotate(45)">
<use xlink:href="#large" />
</g>
<g class="small">
<path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
</g>
</g>
</svg>

Output :)

1)