Wednesday, 19 February 2014

CSS

How to check responsive site
****************************************************************
http://responsivedesignsimulator.com/
********************************************************
How to use Website Icons Without css
*****************************************************
http://fortawesome.github.io/Font-Awesome/icons/
*****************************************************
SET CSS IN PARTICULAR PAGE IN WORDPRESS
***************************************************
#post-273 .afc > h2 {
  background: none repeat scroll 0 0 #008c99;
  color: #fff;
  font-size: 21px;
  margin: 0;
  padding: 12px 17px;
  width: 450px;
}
***********************************************************************
In css ul li hide any li
***************************************************
ul li:nth-child(x) {  
          display:none;
        }
Where x is no. of li.ex-2

IMAGE HOVER ZOOM EFFECT
********************************************************************
a {
    text-decoration: none;
    display: block;
    width: 330px;
    height: 228px;
    float: left;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a:hover {
    opacity: .7;
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}

*************************************************************************
HOW TO CUT IMAGE ONLINE PSD TO WEB
**********************************************************************
http://psdtoweb.de/

HOW TO OPEN
PSD IN HTML First open psd to photoshop ->save psd jpeg format ->open new html file and call img sre jpeg img then save .html format
********************************************************************
li:nth-child(2) CHILD PROPERTY CSS
------------------------------
.main_nav .nav .menu .vertical-menu li:nth-child(1) .vertical-menu_submenu .vertical-menu_sub-submenu .headerHover__brands_banner  {
background-image: url(/s/files/1/0044/1208/0217/files/Campus_Single_Bed.png?v=1642217337)!important;
background-repeat: no-repeat;
}
.main_nav .nav .menu .vertical-menu li:nth-child(2) .vertical-menu_submenu .vertical-menu_sub-submenu .headerHover__brands_banner  {
background-image: url(/s/files/1/0044/1208/0217/files/Czar_2_King_Bed_Box_Storage.png?v=1642217337)!important;
    background-repeat: no-repeat;
}
***************************************************************************
HOW TO RESPONSIVE
***************************************************************************
1024,980
tab
768,640,480
mob
360,320,240

@media screen and (max-width:768px) { }

@media screen and (max-width:1280px){
.banner_right {
  width: 11.2% !important;
}
}
@media screen and (max-width:980px){
.banner_right {
  width: 11.2% !important;
}
}
@media screen and (max-width:800px){
.banner_right {
  width: 11.2% !important;
}
}
@media screen and (max-width:768px) {
.banner_right {
  width: 10.2% !important;
}
 }
@media screen and (max-width:480px) {
.banner_right {
  width: 9.2% !important;
}
 }
@media screen and (max-width:360px) {
.banner_right {
  width: 8.2% !important;
}
 }
@media screen and (max-width:320px) {
.banner_right {
  width: 8.2% !important;
}
 }
@media screen and (max-width:240px) {
.banner_right {
  width: 6.2% !important;
}
 }

****************************************************************
HOW TO RESPONSIVE
***************************************************************
@media screen and (max-width:980px){
.dt-sc-one-half.column.first {
  padding: 0 0 0 1px;
}
.dt-sc-one-half {
  width: 48.9%;
}
.entry-thumb img {
  height: auto;
  width: 100%;
}
 }

***************************************************************
RESPONSIVE WIDTH  SELECTOR

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}

lalit h2 {border:1px solid grey; margin:5px; padding:8px; background:yellow; }
@media only screen and (min-width:500px) {
lalit h2 {border:1px solid grey; margin:5px; padding:8px; background:#ccc; font-size:20px;}
}
@media only screen and (min-width:768px) {
lalit h2 {border:1px solid grey; margin:5px; padding:8px; background:#00FF00; font-size:30px;}
}

@media only screen and (min-width:1024px) {
lalit h2 {border:1px solid grey; margin:5px; padding:8px; background:blue; font-size:50px;}
}
@media only screen and (min-width:768px) and (max-width: 1500px) {
}
</style>
*****************************************************************
FACEBOOK ICON MOVE HOVER 360 DEGREE
********************************************************************
.footer ul li:hover {
  transform: rotate(360deg);
  transition-duration: 2s;
}
*****************************************************************************
POSITION RELATIVE OR ABSOLUTE CODE
***************************************************************************
<!--this will display calculator-->

<div id="calc"  style=" position: absolute; z-index: 50; left: 516px; min-width: 341px; min-height: 245px; margin-top:-413px;">
<?php if(is_front_page() || is_home() ) { ?>
<?php if ( dynamic_sidebar('fifth-footer-widget-area') ) : else : endif; ?>
<?php } ?>
</div>

<!-- display calculator  code ends -->
*******************************************************************
IMAGE HOVER ROTATE 360&deg;
*******************************************************************
.rotate:hover {
  transform: rotate(360deg);
}
--------------------------------------------------------------------------------
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
    }

.rotate:hover
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
********************************************************************
* {
  -moz-box-sizing: border-box;
}
http://jsfiddle.net/desandro/Ew6Zt/

****************************************************************
SIMPLE IMAGE HOVER ZOOM EFFECT
********************************************************
<a href="#">
    <img src="path-to-image.jpg" alt="">
</a>
------------CSS---------------------------
a {
    text-decoration: none;
    display: block;
    width: 330px;
    height: 228px;
    float: left;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a:hover {
    opacity: .7;
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}

**************************************************
When 1st li border delete
*********************************************************
#nav li:nth-child(1) {
  border: 0 none;
}
**************************************************************
ONLY MAC SUPPORT CSS
****************************************************************
.mac .nav-container {
  left: 64px;
  position: absolute;
  top: 74px;
  width: 560px;
}

AND PASTE THIS JQUERY IN HEADER.PHTML
----------------------------------------------------------
<!--<script src="//code.jquery.com/jquery-1.10.2.js">
$.noConflict();
</script>-->
<!--<script>
$(document).ready(function(){
if (navigator.userAgent.indexOf('Mac') != -1) {
  $("body").addClass("mac");
} else {
  $("body").addClass("pc");
}
});
</script>-->
<script>
jQuery(document).ready(function(){
if (navigator.userAgent.indexOf('Mac') != -1) {
  jQuery("body").addClass("mac");
} else {
  jQuery("body").addClass("pc");
}
});
</script>
************************************************************
ONLY CHROME SUPPORT CSS
***********************************************************
@media screen and (-webkit-min-device-pixel-ratio:0) {
.nav-container-outer {
width: 850px;
position: absolute !important;
top: -3px !important;
}
.nav-container {
  /*left: 104px;*/
}
}
********************************************************
when one browser select drop down language then same css problem SOLVE ISSUE
*********************************************************
.form-search:lang(fr) {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
  border: 1px solid !important;
  float: right;
  left: 121px !important;
  margin: 65px 0 0;
  padding-bottom: 0;
  position: relative;
  width: 239px;
}
********************************************************************
Apply css all li but remove last li
********************************************************************
.special li {
  margin-right: 66px;
}
 .special li:nth-child(4n) {
  margin-right: 0;
}

*********************************************************
Media Query Responsive CSS
---------------------------------------------------------------
@media (max-width: 575px) {
.banner-slider {
    height: 383px;
    margin-bottom: 34px;
margin-left: -.375rem;
    margin-right: -.375rem;
}
}

@media (min-width: 576px) {
.award_mummy {
    float: left;
}
}
******************************************************************
BACKGROUND ISSUE FIX
-------------------------------------------------------------------
Resolved menu scrolling issue in mobile and filter by pop up scrolling issue in mobile also

.menupopupbody {
overflow:hidden;
position:relative;
}

USING ADD, REMOVE, TOGGLE CLASS
<script>
$('.mobile-button').click(function(){
$('body').addClass("menupopupbody");
});
$('.mobile-button.active').click(function(){
$('body').removeClass("menupopupbody");
});
$('.mobile-button').click(function(){
$('body').toggleClass("menupopupbody");
});
</script>

Where-> mobile-button (nav class name on mobile)

<script>
$('.product-filter-button').click(function(){
$('body').addClass("popupbody");
});
$('.close-filter-popup').click(function(){
$('body').removeClass("popupbody");
});
</script>
Where-> product-filter-button ((popup model) class name on mobile and (close-filter-popup) this is close button name)
**********************************************************************************
How to set Button border on submit 0px
--------------------------------------
button[type=submit]:focus {
  background-color: green;
  outline: 0;
} 
button[type=submit]:active{
      background-color: green;
      outline: 0;
      border: none;
    } 
***************************************
How to fix content overlap issue
-----------------------------
.slick-track {
    overflow-x: scroll;
}

************************************************************
How to remove scrollbar bottom border in any section
------------------------------------------------------------------------------
 ul#collectionTab::-webkit-scrollbar {
    background-color: transparent;
}
   ul#collectionTab::-webkit-scrollbar-thumb {
    background-color: transparent;
}
   ul#collectionTab::-webkit-scrollbar-track {
    background-color: transparent;
}
**********************************************
READ CSS
**********************************************************
http://ianlunn.github.io/Hover/
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)