Tag: CSS3

Apply css only for chrome and safari

For apply css in chrome and safari see below code.

Add this css Code in style seet and your class name.

@media screen and (-webkit-min-device-pixel-ratio:0) {

/****** This code chrome or safari ******/

.banner-nav-left{
background-position-x: center;
background-position-y: -12px;
}

/****** This code only safari ******/

::i-block-chrome, .banner-nav-left{
background-position-x: center;
background-position-y: -12px;
}

}

 

How add custom css and jquery in wordpress

How add custom css and jquery in wordpress

This code put in functions.php and set path as folder.

/**
* Enqueue scripts and styles for the front end.
*/
function your_function_scripts() {
wp_enqueue_style('style', get_template_directory_uri() . '/style.css', '', '1.0');
wp_enqueue_style('bootstrap_theme_mini', get_template_directory_uri() . '/css/bootstrap.css', '', '1.0');
wp_enqueue_style('theme_mini', get_template_directory_uri() . '/css/theme.css', '', '1.0');

wp_enqueue_script( 'jquery_min','//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js', 0 );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '1.0', 0 );
}
add_action( 'wp_enqueue_scripts', 'your_function_scripts' );

Above snippet using to we add custom CSS and jQuery in Front end.

CSS how to add Gradients

To add gradient in CSS use below code.

CSS code Below:

.liner-gridiaent{
width:300px;
height:200px;
border-radius:7px;
-moz-border-radius:7px; /* Firefox */
-webkit-border-radius:7px; /* Safari and Chrome */
background: linear-gradient(top, #e0e0e0 0%,#666666 59%); /* standerd syntex */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(59%,#666666));
/*Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* IE10+ */

How to change cursor using CSS and HTML

How to change cursor to mouse over see below:

<h2>Mouse over the words to change the cursor.</h2>
<ul>
  <li class="auto">auto</li>
  <li class="crosshair">crosshair</li>
  <li class="default">default</li>
  <li class="e-resize">e-resize</li>
  <li class="help">help</li>
  <li class="move">move</li>
  <li class="n-resize">n-resize</li>
  <li class="ne-resize">ne-resize</li>
  <li class="nw-resize">nw-resize</li>
  <li class="pointer">pointer</li>
  <li class="progress">progress</li>
  <li class="s-resize">s-resize</li>
  <li class="se-resize">se-resize</li>
  <li class="sw-resize">sw-resize</li>
  <li class="text">text</li>
  <li class="w-resize">w-resize</li>
  <li class="wait">wait</li>
</ul>

Style here

.cursor {
	text-align: center;
	font-size: 18px;
}
.auto {
	cursor: auto;
}
.crosshair {
	cursor: crosshair;
}
.default {
	cursor: default;
}
.e-resize {
	cursor: e-resize;
}
.help {
	cursor: help;
}
.move {
	cursor: move;
}
.n-resize {
	cursor: n-resize
}
.ne-resize {
	cursor: ne-resize
}
.nw-resize {
	cursor: nw-resize
}
.pointer {
	cursor: pointer
}
.progress {
	cursor: progress
}
.s-resize {
	cursor: s-resize
}
.se-resize {
	cursor: se-resize
}
.sw-resize {
	cursor: sw-resize;
}
.text {
	cursor: text;
}
.w-resize {
	cursor: w-resize;
}
.wait {
	cursor: wait;
}

Simple drop down css menu

simple drop down css menu example

In this post I describe that how we can create drop down menu using CSS3 and html ui li tag.

Below is the code for html file.

<ul>
	<li><a href=”index.php”>Link</a>
	<ul>
		<li><a href=”index.php”>Sub Link</a></li>
		<li><a href=”index.php”>Sub Link</a></li>
	</ul>
	</li>
</ul>

In CSS put this code for simple drop down menu.

.vertical-nav {
height:auto;
list-style:none;
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
min-width: 125px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.sub-menu li
{
clear: both;
}

 

CSS Text Overflow with Ellipsis

Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in. The most common way to use it is the ellipsis character: “…”

We can render an ellipsis (“…”) to represent clipped text. from billow property.

Put this code in style seet.

.box
{
white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid #000000;
}

Put this code in html code.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s

 

CSS how to add accordion menu.

Let us create a simple Accordion Menu using CSS3 and HTML.

Accordion Menu has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area.

Below is the code for html file.

accordion-1

some text

accordion-2

some text

accordion-3

Some textSome textSome textSome textSome text

accordion-4

Your content gose heare

</section>
</div>

 

In CSS put this code for accordion menu.

.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #000;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: ”;
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background-color:#999;
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
font-style: italic;
color: #000;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container input:checked ~ article{
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 190px;
}

The output for the above Code is like below.

accordian

Standard Media Queries For Responsive Website

standard media queries for css responsive mobile layout for all screen. all types of mobile, tablets and desktop.

@media(min-width:320px) and (max-width:479px)
{
}
@media(min-width:480px) and (max-width:567px)
{
}
@media(min-width:568px) and (max-width:684px)
{
}
@media(min-width:685px) and (max-width:767px)
{
}
@media(min-width:768px) and (max-width:991px)
{
}
@media(min-width:992px) and (max-width:1024px)
{
}
@media(min-width:1023px) and (max-width:1200px)
{
}