Stronger: CSS

Showing posts with label CSS. Show all posts

Wednesday, 10 December 2014

Responsive Design: Include @media queries as mixins using LESS

I have to includ the @media queries as a seperate file and sections before.
That was very circumstantial and took a long time to find and redefine each elemnt to display properly on Mobile Devices.

Since LESS has included the support of mixins, it is very comfortable to define such queries.

All you need is:

Define your preferred Breakpoints as Variables
Include the queries inside the main element

Sample:

Step 1: Define your preferred Breakpoints as Variables

Step 2: Include the queries inside the main element

Wednesday, 8 January 2014

nice HTML HR (horizontal rule) with CSS

here is a sample of creating a horizontal rule with only CSS commands without using an Image. The point here is to define a DIV element with same settings as HR and rotate and put it over the HR.

your page with look like here:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

and here is the code:

Tuesday, 29 May 2012

Pretty animated Share buttons using JQuery and CSS

I made this component very quickly today (< 10min) and it looks amazing noneless.

Step 1: save these lines as index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>

 <ul style="margin: 100px">
  <li style="font-weight: bold; text-shadow: #c0c0c0 3px 3px 5px; margin-bottom: 10px; color: #000;">
   <span>Share this page</span><br />
  </li>
  <li>
   <div class="shareIconsContainer">
    <div>
     <span class="shareIcons emailShare"></span>
     <span class="shadow" />     
    </div>
    <div>
     <span class="shareIcons facebookShare"></span>
     <span class="shadow" />
    </div>
    <div>
     <span class="shareIcons twitterShare"></span>
     <span class="shadow" />
    </div>
    <div>
     <span class="shareIcons googleplusShare"></span>
     <span class="shadow" />
    </div>
   </div>
  </li>
 </ul>
 
 <script type="text/javascript">
  $('span.shareIcons').on({
   mouseenter: function(){
    $(this).stop(false, true).animate({
     'height' : '32px',
     'marginTop' : '0px'
    }, 150);
   },
   mouseleave: function(){
    $(this).stop(false, true).animate({
     'height' : '12px',
     'marginTop' : '20px'
    }, 150);
   }
  });
 </script>

</body>
</html>

Step 2: create a folder and name it "css", save these lines as style.css in it

body, ul, li, h1, h2, h3{
 margin:0;
 padding:0;
}

body{
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 color:#fff;
 overflow-x:hidden;
}

span.helpIcons {
    width: 200px;
    height: 32px;
    display: block;
    float: left;
    margin-bottom: 10px;
}

span.helpIcons a {
    margin-left: 36px;
    margin-top: 32px;
    -moz-transition: all 0.5s ease 0s;
    opacity: 0.50;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 4em;
}

span.helpIcons a:hover {
    opacity: 1;
}

div.shareIconsContainer {
    width: 200px;
    height: 32px;
    display: block;
}

span.shareIcons {
    width: 32px;
    height: 12px;
    display: block;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    cursor: pointer;
}

span.shadow {
    width: 42px;
    height: 12px;
    display: block;
    float: left;
    margin-left: -47px;
    margin-top: 27px;
    background: url("../images/shadow.png") no-repeat scroll 0px 0px transparent;
}

.alertShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -160px transparent;
}

.printShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -96px transparent;
}

.emailShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -0px transparent;
}

.facebookShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -32px transparent;
}

.twitterShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -128px transparent;
}

.googleplusShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -64px transparent;
}

Step 3: Use these 2 Images as Shadow and Icons (Right-Click -> Save as):

Sprite:

Shadow:

Preview:

Share this page