• Small Discription For Image - 1.

  • Small Discription For Image - 2.

  • Small Discription For Image - 3.

  • Small Discription For Image - 4.

New Post

Rss

Friday 27 February 2015
no image

How to Multiple Columns in css

Here is an example of a simple three-column class:

 .three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; }

 Of which you would apply to a block of text like so:
<p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Example


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Note that the height of each column is auto-balanced, as per the spec.

Also note this demo and sample code is using moz and webkit vendor prefixes, should only work in Gecko (Firefox 1.5+, et al.) and Webkit (Safari 3+, Chrome, et al.) browsers. No native support in Internet Explorer or Opera yet that I know of.

All Related Properties

.three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : 20px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; }

You can also set the column-width (with prefixes) but it generally makes more sense to let it auto calculate that.
The rule ("rule", as in, a line) will split the gap down the middle. You can use the same values as you would a border.
Take care not to have your text blocks be so enormously tall that they are taller than a (fairly small) browser window, otherwise it's the same problem as text being wider than the browser window (scrolling back and forth to read = sucks). Also consider text-align: justify;
Posted by at 04:44 0 comments
Labels:
no image

Reset CSS

The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
Posted by at 04:38 0 comments
Labels:
no image

Media Queries for Standard Devices

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

Syntax
Media  queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet --> 
<style> 
@media (max-width: 600px) { .facet_sidebar { display: none; } }
</style>

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
Posted by at 04:34 0 comments
Labels: , ,
Make Non-Password Inputs Use Bullets (or Bullet Alternatives)

Make Non-Password Inputs Use Bullets (or Bullet Alternatives)


This works on texty inputs (e.g. text, email, etc) but you cannot change actual password inputs. Use case = ???.
CSS:
input { -webkit-text-security: none; } 
input { -webkit-text-security: circle; } 
input { -webkit-text-security: square; }
input { -webkit-text-security: disc;  /* Default */ }
Posted by at 04:28 0 comments
Labels: ,
no image

Replacing HR tag element with images

We start with some nice clean code for all the "alternative" browsers:

hr { border : 0; height : 15px; background : url(hr.gif) 0 0 no-repeat; margin : 1em 0; }

This seems to work for all standards compliant modern browsers. I've tested it on Opera, Safari & Firefox. However, it does not work on Explorer. IE treats the element as inline and demands a border around it and a minimum height of 1px.

IE supports very basic generated content with the list-style-image setting when combined with display: list-item. This is what I've used to get around the limitations.

Add this into conditional comments (or hacks if you prefer) to shift the element out of the way and insert a bullet picture in the resulting space:

hr { display : list-item; list-style : url(hr.gif) inside; filter : alpha(opacity=0); width : 0; }
Posted by at 04:24 0 comments
Labels: ,
Prevent Long URL’s From Breaking Out of Container

Prevent Long URL’s From Breaking Out of Container


Allow long words to be able to break and wrap onto the next line:

p.test {
    word-wrap: break-word;
}

Syntax: word-wrap: normal|break-word|initial|inherit;

A more robust browser support, you'll need more
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */ 
word-break: break-all; 
/* Non standard for webkit */ 
word-break: break-word; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto;
Posted by at 04:03 0 comments
Labels:
Subscribe to: Posts (Atom)
Copyright © 2012 Core CSS All Right Reserved
Designed by CBTblogger @ themeforest. And Premium Blogger template
Posts RSS
Comments RSS