Css

Css

From TUMRAI [QuickNote]

Jump to: navigation, search

Inspirations_Box > Css



Contents

filter

.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

<picture>

<picture>
  <source media="(max-width:1000px)" srcset="image/apple.png">
  <img src="image/g.jpg" alt="Flowers" style="width:auto;">
</picture>

    <a href="<?php the_permalink(); ?>">

        <picture>

        <?php if(get_sub_field('mobile_image')){ ?>

        <source srcset="<?php the_sub_field('mobile_image'); ?>" media="(max-width: 1169px)">

        <?php } ?>

        <source srcset="<?php the_sub_field('images'); ?>">

        <img  style="width:100%;" srcset="<?php the_sub_field('images'); ?>"  > 

        </picture>

    </a>

Drop Down

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

http://www.w3schools.com/css/css_dropdowns.asp

css toggle

http://codepen.io/anon/pen/jfAoa

Page BW

body{

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
}

box in box vertical buttom

<style>
.border{ border:1px #05A83B solid}
#outbox{ height:400px; width:400px; display: table-cell; vertical-align:bottom}
#in{ height:200px; width:100%}

</style>


<div id="outbox" class="border">
<div id="in" class="border"></div>

input

<input type="range" name="points" min="0" max="10">
<input type="color" name="favcolor" value="#ff0000">
<input type="date" name="bday">
<input type="number" name="points" min="0" max="100" step="10" value="30">
<input type="month" name="bdaymonth">
<input type="time" name="usr_time">
<input type="week" name="week_year">
<input type="datetime" name="bdaytime">
<input type="datetime-local" name="bdaytime">
<input type="tel" name="usrtel">
<input type="search" name="googlesearch">
<input type="url" name="homepage">
<input type="radio" name="gender" value="female"> Female
<input type="text" name="firstname" value="Mickey">
<input type="password" name="psw">
<input type="checkbox" name="vehicle2" value="Car"> I have a car 
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<input type="submit" value="Submit">

Force ios css

-webkit-appearance: none;

Video BG

BG Full Screen

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Checkbox

Display text one line

/*max-width: 150px;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Table Overflow

max-width:150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overlay

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    z-index:9999;
    color:white;
}

Inner border

.box{box-sizing:border-box;}

Text Middle div

.textcenter{  height: 70px;
   text-align: center;
   line-height: 70px; }

image in div middle

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Middle</title>
<style>
.sizediv{ height:300px}
.outdiv{
display: table;
border:1px solid rgba(0,255,102,1);
height:100%;
}
.middiv{
display: table-cell;
vertical-align: middle;
}

</style>
</head>

<body>

<div class="sizediv">
    <div class="outdiv">
        <div class="middiv">

            this is middle content

        </div>
    </div>
</div>

</body>
</html>

Css for Device

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

Transition

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.mydiv:hover .movedown { transform: translate(0px,10px);}
.movedown { transition: all .2s ease-in; top:20px }
</style>
</head>

<body>
<div class="mydiv">
<div class="movedown"> DOWN</div>
</div>
</body>
</html>

TOOL

Transition

Here’s a typical transition that changes link color on mouseover using pure CSS: view plain?

   a, a:link, a:visited {  
       color: lightblue;  
       -webkit-transition: color .4s linear;  
       -moz-transition: color .4s linear;  
       -o-transition: color .4s linear;  
       -ms-transition: color .4s linear;  
       transition: color .4s linear;  
   }  
     
   a:hover {  
       color: white;  
   }  

This will animate the color property when you hover over a link on the page. Pretty simple, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.

You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined below. I’ve also included a demo for each example. Transitions Using :active

The :active pseudo-class matches any element that’s in the process of being activated. The primary way that an element is “activated” is by means of a mouse click, or mouse down.

Here’s some CSS and an accompanying demo that demonstrates using :active along with CSS3 transitions to mimic a mousedown event: view plain?

   .box {  
       width: 300px;  
       height: 300px;  
       background: #222;  
       -webkit-transition: width 2s ease, height 2s ease;  
       -moz-transition: width 2s ease, height 2s ease;  
       -o-transition: width 2s ease, height 2s ease;  
       -ms-transition: width 2s ease, height 2s ease;  
       transition: width 2s ease, height 2s ease;  
   }  
     
   .box:active {  
       width: 500px;  
       height: 500px;  
   }  

With this code, the box’s width and height properties are animated to become larger as you hold the mouse down on the element. Once you release, the box animates back to its original dimensions.

Here’s a demo:

   View Demo

Transitions Using :focus

You can use the :focus pseudo-class to do something similar. This time we’ll use a form, and we’ll animate the width of any form element that receives focus: view plain?

   input, textarea {  
       width: 280px;  
       -webkit-transition: width 1s ease;  
       -moz-transition: width 1s ease;  
       -o-transition: width 1s ease;  
       -ms-transition: width 1s ease;  
       transition: width 1s ease;  
   }  
     
   input:focus, textarea:focus {  
       width: 340px;  
   }  

And here’s a live demo:

   View Demo

Transitions Using :checked

You can animate checkboxes and radio buttons when they become “checked” — although you’re limited with what you can do with those, since you can’t really change their native styling.

We’ll just do a simple width change, which will appear to indent any selected checkbox: view plain?

   input[type="checkbox"]:checked {  
       height: 20px;  
       -webkit-transition: width 1s ease;  
       -moz-transition: width 1s ease;  
       -o-transition: width 1s ease;  
       -ms-transition: width 1s ease;  
       transition: width 1s ease;  
   }  
     
   input[type="checkbox"]:checked {  
       width: 30px;  
   }  

And here’s a simple demo:

   View Demo

Transitions Using :disabled

Keeping with the theme of web forms, this time we’ll combine CSS3 transitions with some jQuery to animate the background color of form elements when they become disabled via the disabled attribute: view plain?

   input[type="text"], textarea {  
       background: #e2e2e2;  
       -webkit-transition: background 1s ease;  
       -moz-transition: background 1s ease;  
       -o-transition: background 1s ease;  
       -ms-transition: background 1s ease;  
       transition: background 1s ease;  
   }  
     
   input:disabled, textarea:disabled {  
       background: #666666;  
   }  

And the quick-and-dirty jQuery that adds/removes the disabled attribute is: view plain?

   $(function() {  
       $('input[type="radio"]').click(function() {  
           if ($(':checked').val() === "other") {  
               $('input[type="text"]').removeAttr("disabled");  
           } else {  
               $('input[type="text"]').attr("disabled", "disabled");  
           }  
       });  
   });  

So when the last radio button is selected (the one with a value of “other”), the text box has its disabled attribute removed. If another option is selected, the disabled attribute is re-applied.

The :disabled pseudo-class is dependent on that attribute being present, so the animation will occur whenever that attribute is added or removed.

Here’s the demo:

   View Demo

Transitions Using Media Queries

This last one may be the least practical, because let’s face it, the only people that ever resize their window to see what happens are web developers.

Nonetheless, this is just another way to use CSS3 transitions. The new Modernizr design does this.

Here’s the code: view plain?

   .box {  
       width: 440px;  
       height: 440px;  
       background: #222;  
       margin: 0 auto;  
       -webkit-transition: width 2s ease, height 2s ease;  
       -moz-transition: width 2s ease, height 2s ease;  
       -o-transition: width 2s ease, height 2s ease;  
       -ms-transition: width 2s ease, height 2s ease;  
       transition: width 2s ease, height 2s ease;  
   }  
     
   @media only screen and (max-width : 960px) {  
       .box {  
           width: 300px;  
           height: 300px;  
       }  
   }  

This example animates two different properties simultaneously, separating the two by a comma. The media query tells the box to shrink if the screen size goes below 961px.

Resize your window in the demo page to see it work:


w3sc

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
} 
div:hover
{
width:300px;
} 

Image hover

.fine-event-box a:link img ,.fine-event-box a:visited img  {
	border: 4px solid #EEE;
}
.fine-event-box a:hover img ,.fine-event-box a:active img  {
	border: 4px solid #333;
}

every (n) on list

.homethumb:nth-child(2n){
	margin-right: 0px !important;
	border: 1px solid #960;
}

every number 8?

.newsthb:nth-child(8n+1){ margin-right:0px !important}

Blockquotes

Other

css3

Tips

image vertical center

.art-thumb2 {
	height: 380px;
	width: 180px;
	background-color: #960;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.wraptocenter * {
    vertical-align: middle;
}
/* IE/Mac \*//*/
* html .wraptocenter {
	display: block;
	line-height: 0.6;
}
* html .wraptocenter span {
	display: inline-block;
	height: 100%;
	width: 1px;
}
/**/

<!--[if lt IE 8]><style>
.wraptocenter span {
	display: inline-block;
	height: 100%;
}

box shadows

 box-shadow: 0 0 8px #1e1e1e;
  -moz-box-shadow: 0 0 8px #1e1e1e;
  -webkit-box-shadow:0 0 8px #1e1e1e;

ie

filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);

TEXT SHADOW

	text-shadow: 0px 1px 2px rgba(82, 82, 82, 0.3);

border-radius

	
border: 6pt solid #E7E7E7;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;

Custom Web Fonts with @Font-Face

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

background-size

background-image: url(bg-image.png);
-moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%;           /* Opera 9.5 */
-webkit-background-size: 100% 100%;           /* Safari 3.0 */
-khtml-background-size: 100% 100%;           /* Konqueror 3.5.4 */

z-index

The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute”


text button

.button {
	padding-left: 8px;
	display: inline-block;
	margin-right: 5px;
	background: url('button_left.jpg') top left no-repeat;
	text-decoration: none;
	color:#FFF;
}

.button span {
	color: #CCC;
	display: block;
	background: url('button_right.jpg') top right no-repeat;
	font-size: 11px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 2px;
	cursor: pointer;
	cursor: hand;
	font-weight: bold;
}

usage

<span class="button"><span>Button Name</span></span>

submit button

.artbutton {
	background: url('button.jpg') top right no-repeat;
	width: 139px;
	height: 25px;
	color: #333;
	border: none;
	cursor: pointer;
	cursor: hand;
	
}


<input name="" type="button"  class="artbutton"/>

cursor

	cursor: default;
	cursor: 	pointer;

Jquery

$("#shop-map").mouseover(function(){  // if on this (mouseover) event 
$("#shop-map").css({"cursor" : "default" }); // Do this			
$("#shop-map").css({"cursor" : "pointer" }); // Do this		
$("#shop-map").css({"background-image" : "url(http://thaiorientalbeauty.com/wp-content/themes/thaiis/images/shop-inside-over_02.jpg)" }); // Do this
}); // close over event

Dev full browser area

#fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}


opacity

#some_id {
    filter:alpha(opacity=70); //ie
    -moz-opacity:0.7; // old  FF
    -khtml-opacity: 0.7; // old Safari
    opacity: 0.7; // new css stand FF safari opera
    }

Search CSS

examples-of-web-forms

http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/ http://www.queness.com/post/821/25-stylish-and-outstanding-login-forms

Transparent iframe

<iframe src="yourpage.html" name="myframe" width="250" height="250" frameborder="0" allowtransparency="true"></iframe>


<style type="text/css">
Body { Background: transparent; }
</style>

Under construction

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Under Construction</title>
<style>
body { background-color:#000000}
#container {
  width: 60px;
  height: 71px;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-left: -30px;
  margin-top: -35px;
}
</style>
</head>

<body>
<div id="container"><img src="http://firstbase.thaiis.net//wp-content/themes/thaiis/images/firstbase-logo.png" width="60" height="71" ></div>
</body>
</html>

center window

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; /*haft h*/
  margin-left: -100px; /*haft w*/
}


menu text no warp

.navigation ul li {
	display: inline;	
}
.navigation ul li a {
white-space: nowrap;
}


Advance

Form

Form Focus

textarea:focus, input:focus, select:focus {
	background:#FFC1E4;  
        border:3px solid #EF4F7A;
}  

checkbox

fieldset {
overflow: hidden;
position: relative;
}
input[type=checkbox] {
position: absolute;
left: -999em;
}
input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(bullet.gif) top left no-repeat;
}
input[type=checkbox]:checked + label {
background-image: url(bullet_checked.gif);
}

input

input[type="text"]

button
checkbox
file
hidden
image
password
radio
reset
submit
text

image middle div

.pda {
	height: 130px;
	width: 240px;
	position: relative;
}
.pda img {
position:absolute;top:0;bottom:0;margin:auto;
}
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

Select hightlight

::selection {
	background: #ffb7b7; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}


Disable mouse event

pointer-events:none;

Overlay

Generator

best benchmark

table

th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.odd-tr{
	background-color: #fce2e5;
}
.even-tr{
	background-color: #FDEEF0;
	}
	
.odd-tr:hover{
	background-color: #FBD9DD;
}
.even-tr:hover{
	background-color: #F9CCD1;
	}
	
td{
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 25px;
}
th{
	background-color: #FACBD1;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

animate

Different Stylesheets for Differently Sized Browser Windows


Gradient Gen

http://www.colorzilla.com/gradient-editor/

first-letter

.footmenu li:first-letter {font-size: 14px !important; }

corn

.corn{
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}


Box Shadow

<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: -5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: 5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
</style>
</head>
<body>
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>
</body>
</html>
Retrieved from "https://tumrai.com/Css"