Create an underline using psuedo classes without border-bottom

.paygift-data{
.divider-row-single { //parent class
position: relative;
border-bottom: 0 solid @hr-grey-4;
padding-bottom:15px;
&:after{ //psuedo class
background-color: @hr-grey-4;
content: “”;
position: absolute;
height: 1px;
display: block;
left: -10px;
right: -10px;
margin-top: 15px;
}
}
}

Preloading images before page onload using css and js

css:

body:after
{
content: url(‘../../img/spinner/b.webp’);

}

 

js/ajax:

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};

More about CSS Preprocessors

What Are CSS Preprocessors?

CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years. 3 of the more popular css preprocessors are Sass, LESS, and Stylus

Because they aren’t css, they aren’t bound by the limitations of css.The preprocessed language can give you more functionality than css as long as it eventually makes sure everything is output as css and works in a browser like we expect.

Preprocessors offer more than variables of course. They can offer whatever they want as long as the resulting css file they produce works as ordinary css.

Risks:

At the same time there are potential issues to using a preprocessor, which keeps some away. The main issue is that everyone working on the site needs to be using the same preprocessor. Part of your team couldn’t work in Sass while the some others use LESS and others still edit the css files directly.

Which CSS Preprocessor Should You Use?

That’s really up to you. To be honest I don’t know the different languages well enough yet to offer reasons why one is better than another.

Sass, using the .scss syntax

Less, using .less syntax

Less Vs Sass

The only learning curve is the syntax. You should use an app like CodeKit,LiveReload, or Mixture to watch and compile your authored files. You need to know jack squat about Ruby or the Command Line or whatever else. Maybe you should, but you don’t have to, so it’s not a factor here. The fact that Sass is in Ruby and LESS is in JavaScript is of little consequence to most potential users.

How Do CSS Preprocessors Work?

Variables — alone are enough for me to give preprocessors a try. It should be obvious that changing the value of a variable once is much more maintainable than changing the many instances of it’s value spread over a css file.

1
2
3
4
5
6
7
8
9
10
/* -- .scss --  */
$color: #efefef;
body {background:  $color;}

/* -- .less -- */
@color: #efefef;
body {background:  @color;}
 
/* -- resulting css -- */
body {background:  #efefef;}

Hopefully you can see how much more maintainable it is to use the variable as you could update a color scheme across your entire site by changing a handful of variables.

Interpolation — expands on variables in that you aren’t limited to the values of css properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
/* -- .scss --  */
$side: top;
border-#{$side): 1px solid #000;

/* -- resulting css -- */
border-top: 1px solid #000;

/* -- .less -- */
@base-url: "http://example.com";
background-image: url("@{base-url}}/images/bg.png");

/* -- resulting css -- */
background-image: url("http://example.com/images/bg.png");

Operations — come in handy, especially as we’re moving toward web design and development based on proportions over fixed measurements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* -- .scss --  */
$navbar-width: 800px;
$items: 5;
#navbar li {width: $navbar-width/$items - 10px;}

/* -- resulting css -- */
#navbar li {width: 150px}

/* -- .less -- */
@base-color: #111;
#header {color: @base-color * 3;}

/* -- resulting css -- */
#header {color: #333;}

Mixins — allow for the easy reuse of blocks of code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* -- .scss --  */
@mixin rounded-corners {
  $radius: 5px;

  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#navbar li { @include rounded-corners; }
#footer { @include rounded-corners; }

/* -- .less -- */
.rounded-corners  {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {.rounded-corners;}
#footer { .rounded-corners;} 

/* -- resulting css -- */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

#footer {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

Nesting — One last thing I’ll mention is how both Sass and LESS allow for nested formatting and they work in the same way. Notice how the list, list items, and link are nested within #navbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* -- .scss or .less -- */
#navbar {
  width: 80%;
  height: 25px;

  ul { list-style: none; }
  
  li {
    float: left;
    a { text-decoration: none; }
    &:hover { text-decoration: underline; }
  }
}

/* -- resulting css -- */
#navbar {width: 80%; height: 25px;}
#navbar ul {list-style: none;}
#navbar li {float: left;}
#navbar li a {text-decoration: none;}
#navbar li a:hover {text-decoration: underline;}

CSS best transition effect like on selection make div bigger

<html>

<head>

<style type=”text/css”>

html {

background: #ff6461;

}

 

body {

position: absolute;

left: 50%;

top: 50%;

height: 214px;

width: 336px;

margin: -107px -168px;

}

 

input {

visibility: hidden;

}

 

label {

position: absolute;

left: 0;

right: 228px;

background: white;

cursor: pointer;

-webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;

transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;

}

#li0 + label {

top: 14px;

bottom: 164px;

}

#li1 + label {

top: 64px;

bottom: 114px;

}

#li2 + label {

top: 114px;

bottom: 64px;

}

#li3 + label {

top: 164px;

bottom: 14px;

}

:checked + label {

left: 122px;

right: 0;

top: 14px !important;

bottom: 14px !important;

-webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;

transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;

}

</style>

</head>

<body>

<input id=”li0″ name=”foo” type=”radio” />

 

<label for=”li0″></label><input checked=”” id=”li1″ name=”foo” type=”radio” />

 

<label for=”li1″></label>

 

<input id=”li2″ name=”foo” type=”radio” />

 

<label for=”li2″></label>

 

<input id=”li3″ name=”foo” type=”radio” />

 

<label for=”li3″></label>

 

<input id=”li4″ name=”foo” type=”radio” />

 

<label for=”li4″></label>

 

<input id=”li5″ name=”foo” type=”radio” />

 

<label for=”li5″></label>

 

</body>

 

</html>

Fluid Layout CSS

Fluid layouts are nothing but using %’s(width and height) in a desired manner.

You can refer youtube here

Very simple and effective example is here

<div class=”container”>
<div class=”a”></div>
<div class=”b”></div>
<div class=”c”></div>
</div>

.a, .b, .c {
float: left;
height: 200px;
background: #f00;
width: 21%;
margin: 2%
}
.b {
width: 46%;
background: #0f0;
}
.c {
width: 21%;
background: #00f;
}
.container {
width: 100%;
overflow: hidden;
background: #aaa;
}

If you want to get your 3 side by side divs to div down by down while resizing..then you should use width: 123px; and float:left.

you wanna have your image or content in center?? try margin-left: auto and margin-right:auto and display:block

If you want your image to attach to div so that image in div should also resize along with window??

Nothing just use background-image,background-size like shown below..

#one{
background-image: url(../images/page1_img1.png);

width:400px;
height:400px;
background-repeat: no-repeat;
background-size: 50% 50%;

float:left;
}

similarly have #two and #three…you can see side by side divs with images fixed to it..if you resize window..automatically all divs and its images will be resized. if you wanna have it in fluid layout..use width as %’s. Thats it 🙂

Wanna have sticky header??

#navigation {

position: fixed;

z-index: 10;

}

#header {

margin-top: 50px;

}

Note: Always use this for better look without some gutter space around your website..

body{
width:100%;
margin: 0 auto;
}

CSS Media Queries

Types of media types:

Syntax

@media <media-query> { /* media-specific rules */ }

A <media-query> is composed of a media type and/or a number of media features.

Media types

Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
all
Suitable for all devices.
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.

Steps:

1. <meta name=”viewport” content=”user-scalable=no,width=device-width, minimum-scale=1, maximum-scale=1″ />

width=device-width

this means we are telling to the browser “my website adapts to your device width”

Initial-scale

This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.

Maximum-scale

Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.

Minimum-scale

Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.

User-scalable

User-scalable assign 1.0 means website allow to zoom in or zoom out.

But if you assign User-scalable=no its means website not allow to zoom in or zoom out.

10-10-2014 13-06-08

More: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

 

2.<link rel=stylesheet media=(max-width: 800px) href=example.css />

3. Add media type with screen/all/speech/print with following syntax

Eg: media all

@media all and (min-width: 1001px) {

#sidebar ul li a:after {

content: ” (“ attr(data-email) “)”;

font-size: 11px;

font-style: italic;

color: #666;

}

}

4. similarly for screen

@media only screen and (min-width: 768px) and (max-width: 1024px) {

(or)

@media only screen and (max-width: 766px) {

(or)

@media only screen and (max-width: 360px)

(or)

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

(or)

@media only screen and (min-width: 480px) and (max-width: 766px) {
#slide6 {padding-top:123px;background:url(../images/contact_block_bg.jpg) repeat left top;}

}

5. Even we can have orientation landscape/ portrait like below

@media only screen and (max-width: 1024px) and (orientation:portrait){
.slide{background-attachment: scroll;background-position:0 0 !important;
.isologo{
float:right;
}
}

}

@media only screen and (max-width: 1024px) and (orientation:landscape){
.slide{background-attachment: scroll;background-position:0 0 !important;
.isologo{
float:right;
}
}