Category Archives: CSS

CSS shapes – create an Arrow

As always I get inspiration from the great CSS source CSS tricks,
this time in CSS shapes specifically by playing around on Chevron shape created by Anthony Ticknor.
I thought we could do frequently used arrows in CSS as shapes instead of PNG images.

here is an image of how the result will look

css-shapes-arrows

the html code

<span id="arrow-left"></span>
<span id="arrow-right"></span>

the CSS code

#arrow-left{
  position: relative;
  padding: 30px;
}
 
#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}​
 
#arrow-right{
  position: relative;
  padding: 30px;
}
 
#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}

the size can be controlled by changing the padding on the same element selector.

The width of the arrow can be controlled by changing the width value on :before and :after selectors, but you have to change also the right value on :after selector to the complement of previous value to 100 (ex: if you change the width to 30% then you have to change the right value to 70%)

here is a demo
http://cssdesk.com/a2b9G
http://cssdesk.com/67uSH

Responsive and Equidistant menu with CSS only

Lately i face a problem to keep my menu using 100% of the page width and at the same time keep the menu items equidistant, especially if you are using multiple media queries for large screens, then most of us will go to JS solutions.

Until i came throw an article Equidistant Objects with CSS by Chris Coyier with his nice way of explaining how to find the solution inspired me to find another solutions.

The solution:

lets say we have N items with total actual width is Z px
So if we find the prefect margin X for each item to complete the total width to 100% For N number of items
we need 2*N of X (2 x for each item ) And because of the first and last items that should be on the edge of each side, we have to reduce 2 X
so we have ( N * 2 ) – 2 of X margin between the items to fill the space, lets call it Y Y = ( N * 2 ) – 2 N: number of the items 2 We will get Zpx +  X * Y = 100% X = ( 100 / Y )% – ( Z / Y )px here we face the problem of subtracting different units which we can solve it by using margin and padding to solve it like:
Padding = 100 / Y % Margin   = – Z / Y px
and we chose margin for minus value because padding can’t take negative value. Notes:

  • Using different font-family or font-size on different media queries may affect the total element width and break the equation.
  • The easier way to find out the total width is to give all the items 0 margin and padding then keep reducing the page width until the items wrap down (the breaking point), with inspect element we can get the total width.
  • For any reason you want to take off the float:left from <li> items then read this 
  • giving margin & padding 0 for the left side of first item and the right side of last item

Code example:
lets say we have 4 items then
N = 4 ,
Y = 6 ,
Z=292px
Padding = 100 / Y % = 16.66%
Margin  =  – Z / Y px   = 48.66px

li:first-child{margin-left:0;padding-left:0;}
li:last-child{margin-right:0;padding-right:0;}

http://jsfiddle.net/Mohammad_Sabbagh/w74cN/1/

How to change top bar breakpoint using CSS in Foundation Zurb

Aside from using customize Foundation download, lately i was trying to change the Breakpoint width of top bar without redownloading the foundation css

There was no direct way like overiding the css file unless you are using SASS So you need to edit the orginal css file foundation.css or foundation.min.css depends which one you are using

1- search for “.top-bar-js-breakpoint” and edit the width

2- edit the min-width in  “@media only screen and (min-width: X em)” which follow  “.top-bar-js-breakpoint” directly