Stripes in CSS

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Example 1)

<style type="text/css">

.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
}
.module > h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
.module > p {
padding: 0 1rem;
}

.stripe-7 {
color: white;
background: -webkit-repeating-radial-gradient(circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
background: repeating-radial-gradient(circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
}

</style>

<div class="module">

<h2 class="stripe-7">Radial</h2>

<p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p>


</div>

Output :)

Example 2)

<style type="text/css">

div {
height: 50px;
margin-bottom: 10px;
}

.progress {
background: -webkit-repeating-linear-gradient(135deg, #666, #666 25%, #5b5b5b 25%, #5b5b5b 50%, #666 50%) top left fixed;
background: repeating-linear-gradient(-45deg, #666, #666 25%, #5b5b5b 25%, #5b5b5b 50%, #666 50%) top left fixed;
background-size: 30px 30px;
}
.progress .current {
width: 25%;
-webkit-animation: width 5s infinite;
animation: width 5s infinite;
background: -webkit-repeating-linear-gradient(135deg, #465298, #465298 25%, #3f4988 25%, #3f4988 50%, #465298 50%) top left fixed;
background: repeating-linear-gradient(-45deg, #465298, #465298 25%, #3f4988 25%, #3f4988 50%, #465298 50%) top left fixed;
background-size: 30px 30px;
}

.progress-funky {
background: -webkit-repeating-linear-gradient(135deg, #666, #666 10px, #5b5b5b 10px, #5b5b5b 20px, #666 20px) top left;
background: repeating-linear-gradient(-45deg, #666, #666 10px, #5b5b5b 10px, #5b5b5b 20px, #666 20px) top left;
}
.progress-funky .current {
width: 25%;
-webkit-animation: width 5s infinite;
     animation: width 5s infinite;
background: -webkit-repeating-linear-gradient(135deg, #465298, #465298 10px, #3f4988 10px, #3f4988 20px, #465298 20px) top left;
background: repeating-linear-gradient(-45deg, #465298, #465298 10px, #3f4988 10px, #3f4988 20px, #465298 20px) top left;
}

@-webkit-keyframes width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

@keyframes width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

</style>

<div class='progress'>
<div class='current'></div>
</div>

<div class='progress-funky'>
<div class='current'></div>

</div>

Output :)

Source :- http://css-tricks.com/stripes-css/

How to prevent toggle effect when an inside anchor is clicked?

First attach a jQuery file in the example.

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

<style type="text/css">

    .booklist article{
       display:none;
    }

</style>

    <section>
       <ul class="booklist">
         <li>
             <a>Article Name 1</a>
             <article>                      
                  <p><content</p>
                  <img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtAz6X0FdacvaW5MhAXC-tShe0ioIkMv9wfHA4MGJ9LfEFSNZtgs0JVqL3PE0KoZ2O12t2MWLGRJKriDR5RS4UsoOV99K6efvrE6XRJET-rbISfv9JisHDanUJ2qkpwbiMhuEDr0HsgrW/s1600/capture-20141005-161110.png"/>
                  <p>more content</p>
                  <a href="http://www.google.com">Search on google</a>
              </article>
         </li>
         <li>
             <a>Article Name 2</a>
             <article>                      
                  <p><content</p>
                  <img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAgNtjIq9GRU9EXHZzi4gLU1wgoHUJ5tCfuXR__-kYT3_sOxmPxySiehWly3U_ZCyTz39KWRAvS7lYvwXMO2nyeL3wkjRIEUA-A-StUb3tDShR8LirYBlIkEw7kvWhopw-HK5qtX5c5uB/s1600/capture-20141004-135246.png"/>
                  <p>more content</p>
                  <a href="http://www.google.com">Search on google</a>
              </article>
         </li>
         <li>
             <a>Article Name 3</a>
             <article>                      
                  <p><content</p>
                  <img class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhC6M5MK5rFclQ4q8qtlU9XokJUMB6XC1vbMMdy3feALpA6GdnQvlBi3JS3qWczrkUkZc8YDoZ_l1UtUH5E5GcdI_C_c37YJQyse-_cnkG7d7j-TT80DGHuMFMB78j0zNX5xnLoozJtl3O/s1600/capture-20141003-171024.png"/>
                  <p>more content</p>
                  <a href="http://www.google.com">Search on google</a>
              </article>
         </li>
       </ul>
    </section>

<script type="text/javascript">

      $(".booklist li a").click(function(){
         $(this).siblings("article").slideToggle().closest("li").siblings("li").find("article").slideUp();
      });

</script>

Output :)

1)

2)

3)

4)

Nice looking scrolling button effect.

<style type="text/css">

#down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
 opacity:0;
border-top: 20px solid #f00;
}

#down1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

#down2 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

@-webkit-keyframes anim{
from{opacity:0;}
to{opacity:1;}
}

#down{
-webkit-animation:anim 3s;
 -webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim2{
from{opacity:0;}
to{opacity:1;}
}

#down1{
-webkit-animation:anim2 3s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim3{
from{opacity:0;}
to{opacity:1;}
}

#down2{
-webkit-animation:anim 3s;
-webkit-animation-delay:3s;  
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}

</style>

<button>
<div id="down"></div>
<div id="down1"></div>
<div id="down2"></div>
</button>

Output :)

Nice example about how to add lines to the button?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MaHiiii</title>

  <style type="text/css">

a {
font-family: helvetica;
background: #E20025 url(jT5el.png) center no-repeat;
border-radius: 50%;
width: 50px;
display: block;
white-space: nowrap;
padding: 1em 0 1em 0;
text-indent: -3em;
word-spacing: 4em;
text-decoration: none;
margin: 0 auto;
position: relative;
color: #E20025;
box-shadow: 0 0 5px;
}

a:before, a:after {
content: '';
height: 1px;
background: #CCC;
width: 7em;
display: block;
position: absolute;
height: 2px;
top: 1.5em;
}
a:before {
left: -11em;
}
a:after {
right: -11em;
}

@media only screen and (min-width:515px){
a:before,a:after {
width: 9em;
}
a:before {
left: -13em;
}
a:after {
right: -13em;
}
}

@media only screen and (min-width:570px){
a:before,a:after {
width: 10em;
}
a:before {
left: -14em;
}
a:after {
right: -14em;
}
}

@media only screen and (min-width:620px){
a:before,a:after {
width: 12em;
}
a:before {
left: -16em;
}
a:after {
right: -16em;
}
}

@media only screen and (min-width:800px){
a:before,a:after {
width: 17em;
}
a:before {
left: -21em;
}
a:after {
right: -21em;
}
}

  </style>

</head>
<body>
<a href="#">Read More</a>
</body>
</html>

Output :)

CSS Tool-tip

<style type="text/css">

.tooltip{
  display: inline;
   position: relative;
   white-space: pre-wrap;       /* css-3 */
   margin: 20px 20px 20px 20px;
   height: 30px;
   width: 100px
}

.tooltip:hover:after{
   background: #33b5e5;
   border-radius: 5px;
   bottom: 26px;
   color: white;
   content: attr(tip);
   left: 20%;
   padding: 5px 15px;
   position: absolute;
   z-index: 98;
   width:auto;
   min-width:50px;
   max-width:500px;
}

.tooltip:hover:before{
   border: solid;
   border-color: #33b5e5 transparent;
   border-width: 6px 6px 0 6px;
   bottom: 20px;
   content: "";
   left: 50%;
   position: absolute;
   z-index: 99;
}

</style>

<div id="container" style="margin: 220px 135px 0px 0px; height: 400px">

    <a class="tooltip" tip="television">Tip1</a>
    <a class="tooltip" tip="In modern days, TV is behaving like a criminal teacher.">Tip2</a>

</div>

Output :)

Get callback after height animation using jQuery.

First link jQuery file in the example.

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

<style type="text/css">

#btn1{
   background: #321321;
   color: white;
   border-radius:3px;
   border: 1px solid;
   height: 35px;
}
#box{
   background:#c87bb9;
   height:100px;
   width:100px;
   margin:6px;
}

</style>

<button id="btn1">Start Animate</button>
<div id="box"></div>

<script type="text/javascript">

$(function(){
   $("#btn1").click(function () {
       $("#box").animate({
           height: "300px"
       }).promise().done(function(){
           alert('animation is finished');
       });;
   })
});

</script>


Output :)

1)

2)

How to apply CSS to half of a character?

Note :- Insert jQuery file in the example.

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

<style type="text/css">

html{
font-family:'Montserrat';
}

.myStyle {
    position:relative;
    display:inline-block;
    font-size:80px;
font-weight: bold;
    color: transparent;
    overflow:hidden;
    white-space: pre;
}

.myStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content);
    overflow:hidden;
    pointer-events: none;
    color: #8e44ad;
}
.myStyle:after {
    display:block;
    direction: rtl;
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content);
    overflow:hidden;
    pointer-events: none;
    color: #1abc9c;
}

</style>

<p><h2>By MaHiii</h2></p>

<span class="whatever">CSS Tution</span>

<script type="text/javascript">

$(function(){

jQuery(function($) {
var text, chars, $mahi, i, output;
$('.whatever').each(function(idx, mahi) {
$mahi = $(mahi);
text = $mahi.text();
chars = text.split('');

$mahi.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

output = '';

for (i = 0; i < chars.length; i++) {
output += '<span aria-hidden="true" class="myStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}

$mahi.append(output);
});
});
});

</script>


Output :)