Showing posts with label css. Show all posts

How to Prevent Superscripts and Subscripts from Affecting Line-Height

by in , 0

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

Css code to stop superscripts from breaking line heights once and for all

Tutorial Prevent Long URL’s From Breaking Out of Container

by in , 0

Or any long bit of text, really.

.comment-text {
   word-wrap: break-word;
}

A more robust browser support, you'll need more (via):

-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;

The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

How to hide Bounce Scroll in Lion

by in , 0

Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization).

html, body {
  height: 100%;
  overflow: hidden;
}
This will hide scrolling bar

Tutorial PNG Hack/Fix for IE 6

by in , 0

For CSS background-images

.yourselector {
       width:200px;
       height:100px;
       background: url(/folder/yourimage.png) no-repeat;
       _background:none;
       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

Cannot be used with repeating, needs fixed with and height.

For inline HTML images

img, .png {
       position: relative;
       behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

This requires a 1x1px transparent GIF image

Tutorial Picross Style Buttons

by in , 0

As in, the game PICROSS3D.

CSS3 Technique

 

Button Button Button

 

.btn {
  color: white;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 20px;
  text-decoration: none;
  text-shadow: -1px -1px 1px #616161;
  position: relative;
  padding: 15px 30px;
  -webkit-box-shadow: 5px 5px 0 #666;
  -moz-box-shadow: 5px 5px 0 #666;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin: 0 10px 0 0;
}

.btn:hover {
  -webkit-box-shadow: 0px 0px 0 #666;
  -moz-box-shadow: 0px 0px 0 #666;
  top: 5px;
  left: 5px;
}

jQuery Technique

Smoother, but more markup and CSS needed.

<div class="rela">
  <a class="btn green btn1" href="index.html">Jack</a>
  <span class="shadow"></span>
</div>
.rela {
	display: block;
	width: 96px;
	height: 56px;
	position: relative;
	margin: 10px;
}
.btn {
	display: block;
	line-height: 56px;
	text-align: center;
	color: white;
	font-family: Helvetica, Arial, Sans-Serif;
	font-size: 20px;
	text-decoration:none;
	text-shadow: -1px -1px 1px #616161;
	position: relative;
}
.shadow {
	position: absolute;
	top:5px;
	left: 5px;
	background: #666;
	z-index: -1;
	width: 100%;
	height: 100%;
}
$(".btn").hover(function(){
	$(this).stop().animate({ 
		top: "5",
		left: "5"
	}, 100 );
},
function(){
	$(this).stop().animate({ 
		top: 0,
		left: 0
	}, 100 );
});

Tutorial Perfect CSS Sprite / Sliding Doors Button

by in , 0

Demo

View Demo   Download Files

 

HTML

<a class=”GlobalOrangeButton” href=”http://yourwebsite.com”><span>So Neat!</span></a>

CSS

a.GlobalOrangeButton span {
  background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;
  display: block;
   line-height: 22px;
  padding: 7px 0 5px 18px;
  color: #fff;
}

a.GlobalOrangeButton {
  background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right;
  display: block;
  float: left;
  height: 34px;
  margin-right: 6px;
  padding-right: 20px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
}

a.GlobalOrangeButton:hover span {
  background-position: 0 -34px; color: #fff;
}

a.GlobalOrangeButton:hover {
background-position: right -34px;
}

Reference URL

Tutorial Page Curl Shadows

by in , 0

ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }

ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }

Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up.

Reference URL

Tutorial Not-Terrible Image Resizing in IE

by in , 0

img {
       -ms-interpolation-mode: bicubic;
}

If you scale down an image with width and/or height attributes, it's going to look terrible in IE unless you use this.

Tutorial Non-Form Fieldset Look

by in , 0

<section class="fieldset">
 <h1>This is not a fieldset</h1>
 <p>Booyah!</p>
</section>
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}

Reference URL

Tutorial Noise Data URI Image

by in , 0

background-image: url(data:image/png;base64,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);

Reference URL

CSS3 Treeview Without any JavaScript | Nested, Expandable Folders

by in , 0

This is the css, html code for displaying Treeview Without any JavaScript
Demo: Course folder at http://www.liketly.com/course/features/ 

.css-treeview ul,
.css-treeview li
{
 padding: 0;
 margin: 0;
 list-style: none;
}

.css-treeview input
{
 position: absolute;
 opacity: 0;
}

.css-treeview
{
 font: normal 11px "Segoe UI", Arial, Sans-serif;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
}

.css-treeview a
{
 color: #00f;
 text-decoration: none;
}

.css-treeview a:hover
{
 text-decoration: underline;
}

.css-treeview input + label + ul
{
 margin: 0 0 0 22px;
}

.css-treeview input + label + ul
{
 display: none;
}

.css-treeview label,
.css-treeview label::before
{
 cursor: pointer;
}

.css-treeview input:disabled + label
{
 cursor: default;
 opacity: .6;
}

.css-treeview input:checked:not(:disabled) + label + ul
{
 display: block;
}

.css-treeview label,
.css-treeview label::before
{
 background: url("icons.png") no-repeat;
}

.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
 display: inline-block;
 height: 16px;
 line-height: 16px;,
 vertical-align: middle;
}

.css-treeview label
{
 background-position: 18px 0;
}

.css-treeview label::before
{
 content: "";
 width: 16px;
 margin: 0 22px 0 0;
 vertical-align: middle;
 background-position: 0 -32px;
}

.css-treeview input:checked + label::before
{
 background-position: 0 -16px;
}

/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
 .css-treeview 
 {
  -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
 }
 
 @-webkit-keyframes webkit-adjacent-element-selector-bugfix 
 {
  from 
  { 
   padding: 0;
  } 
  to 
  { 
   padding: 0;
  }
 }
}
<div class="css-treeview">
 <ul>
  <li><input type="checkbox" id="item-0" /><label for="item-0">This Folder is Closed By Default</label>
   <ul>
    <li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Ooops! A Nested Folder</label>
     <ul>
      <li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Look Ma - No Hands!</label>
       <ul>
        <li><a href="./">First Nested Item</a></li>
        <li><a href="./">Second Nested Item</a></li>
        <li><a href="./">Third Nested Item</a></li>
        <li><a href="./">Fourth Nested Item</a></li>
       </ul>
      </li>
      <li><a href="./">Item 1</a></li>
      <li><a href="./">Item 2</a></li>
      <li><a href="./">Item 3</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Yet Another One</label>
     <ul>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Disabled Nested Items</label>
     <ul>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
     </ul>
    </li>
    <li><a href="./">item</a></li>
    <li><a href="./">item</a></li>
    <li><a href="./">item</a></li>
    <li><a href="./">item</a></li>
   </ul>
  </li>
  <li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">This One is Open by Default...</label>
   <ul>
    <li><input type="checkbox" id="item-1-0" /><label for="item-1-0">And Contains More Nested Items...</label>
     <ul>
      <li><a href="./">Look Ma - No Hands</a></li>
      <li><a href="./">Another Item</a></li>
      <li><a href="./">And Yet Another</a></li>
     </ul>
    </li>
    <li><a href="./">Lorem</a></li>
    <li><a href="./">Ipsum</a></li>
    <li><a href="./">Dolor</a></li>
    <li><a href="./">Sit Amet</a></li>
   </ul>
  </li>
  <li><input type="checkbox" id="item-2" /><label for="item-2">Can You Believe...</label>
   <ul>
    <li><input type="checkbox" id="item-2-0" /><label for="item-2-0">That This Treeview...</label>
     <ul>
      <li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">Does Not Use Any JavaScript...</label>
       <ul>
        <li><a href="./">But Relies Only</a></li>
        <li><a href="./">On the Power</a></li>
        <li><a href="./">Of CSS3</a></li>
       </ul>
      </li>
      <li><a href="./">Item 1</a></li>
      <li><a href="./">Item 2</a></li>
      <li><a href="./">Item 3</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-2-1" /><label for="item-2-1">This is a Folder With...</label>
     <ul>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
      <li><a href="./">Some Nested Items...</a></li>
     </ul>
    </li>
    <li><input type="checkbox" id="item-2-2" disabled="disabled" /><label for="item-2-2">Disabled Nested Items</label>
     <ul>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
      <li><a href="./">item</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Tutorial Named Colors and Hex Equivalents

by in , 0

Color Name HEX Color

Tutorial Multiple Columns

by in , 0

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;

JavaScript Fallback

Is presented in this A List Apart article.

Tutorial Multiple Borders

by in , 0

Doing it with pseudo elements


Using pseudo elements for multiple borders
has fairly deep browser support as it's CSS 2.1 (not 3).

The element needing multiple borders should have its own border and relative positioning.

#borders {
   position: relative;
   border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value.

#borders:before {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
}

You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before, but not allowing them to be absolutely positioned (so it looks weird).

Other Ways

Don't forget about the outline property. While it's a bit more limited than border (goes around entire element no matter what) it's an extra free border if that's what you need.

outline: 5px solid red;

If you are down with CSS3, you can use box-shadow (one of the deepest supported properties of CSS3) to get infinite (!) box shadows, by comma separating values.

box-shadow:
  0 0 0 10px hsl(0, 0%, 80%),
  0 0 0 15px hsl(0, 0%, 90%);

View Demo

Tutorial Multiple Backgrounds Syntax

by in , 0

Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this:

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

They are comma separated values and there can be as many as you want with different URL's, positioning, and repeat values. You can even combine WebKit gradients into the mix:

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Old school IE on the Mac would display the first background in the list, but other browsers that don't support it fail hard and just display no background. This makes it a hard case for progressive enhancement. That is, unless you use a tool like Modernizr to detect support for it and write a fallback selector which only declares one background for browsers that don't support it.

Tutorial Momentum Scrolling on iOS Overflow Elements

by in , 0

Web pages on iOS by default have a "momentum" style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn't. You can add it back with a special property.

.module {
  width: 300px;
  height: 200px;

  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
Check out this Pen!

FONT SIZING WITH REM / EM / PX

by in , 0

The rem font-size unit is similar to em, only instead of cascading it's always relative to the root (html) element (more information). This has pretty good modern browser support, it's just IE 8 and down we need to provide px fallbacks for.
Instead of repeating ourselves everywhere, we can use a LESS or SASS mixins to keep it clean. These mixins assumes:

This code also use "vairable" in CSS

html {
  font-size: 62.5%; /* Sets up the Base 10 stuff */
}
.font-size(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 10);
  font-size: ~"@{pxValue}px"; 
  font-size: ~"@{remValue}rem";
}
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Usage

p {
  .font-size(13);
}
p {
  @include font-size(13);
}

Another SCSS one with a different approach by Karl Merkli:
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 
  
  #{$property}: $pxValues; 
  #{$property}: $remValues; 
}
So you can do:
@include rem-fallback(margin, 10, 20, 30, 40);
and get:
body {
  margin: 160px 320px 480px 640px;
  margin: 10rem 20rem 30rem 40rem; 
}

Tutorial Meyer Reset

by in , 0

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: "" "";
}

Source: Reset Reloaded

Condensed version:

html,body,div,span,applet,object,iframe,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,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,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;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}

CSS3 Responsive Media Queries for Standard Devices

by in , 0

/* 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 */
}
Reference URL

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

by in , 0

This works on text inputs (e.g. text, email, etc) but you cannot change actual password inputs. Use case = ???.

input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
Here are css code to Make Non-Password Inputs Use Bullets (or Bullet Alternatives)

AliceBlue  #F0F8FF  
AntiqueWhite  #FAEBD7