This Presentation describes the all aspects of Margin property in CSS step by step. This will help you to understand the use of margin property effectively.
CSS Positioning
The position property specifies the type of positioning method used for an element.
There are five different position values:
•static
•relative
•fixed
•absolute
•sticky
CSS3 Features
•CSS Animations and Transitions
•Calculating Values With calc()
•Advanced Selectors
•Generated Content and Counters
•Gradients
•Webfonts
•Box Sizing
•Border Images
•Media Queries
•Multiple Backgrounds
•CSS Columns
•CSS 3D Transforms
Download PPT with Examples up here - https://goo.gl/k4cyfo
A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
This Presentation describes the all aspects of Margin property in CSS step by step. This will help you to understand the use of margin property effectively.
CSS Positioning
The position property specifies the type of positioning method used for an element.
There are five different position values:
•static
•relative
•fixed
•absolute
•sticky
CSS3 Features
•CSS Animations and Transitions
•Calculating Values With calc()
•Advanced Selectors
•Generated Content and Counters
•Gradients
•Webfonts
•Box Sizing
•Border Images
•Media Queries
•Multiple Backgrounds
•CSS Columns
•CSS 3D Transforms
Download PPT with Examples up here - https://goo.gl/k4cyfo
A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width , border-style , border-color .
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width , border-style , border-color .
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
Position adalah properti CSS yang dapat membuat kita melakukan tata letak dari elemen HTML sesuai dengan keinginan kita.
ada 4 value yang bisa kita gunakan pada properti position :
1. static
2. relative
3. absolute
4. fixed
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
2. how to position
1. Determine the method of positioning
position:static;
position:relative;
position:absolute;
position:fixed;
2. Specify the actual numerical values for
its exact coordinates
left:100px; right:200px;
top:50px; bottom:5px;
3. POSITION: STATIC
• Default setting
• Positions itself according to the “normal
flow” (order of declaration of elements
in the HTML, etc)
• rules like left:10px; top:30%; do not
work
4.
5. POSITION: RELATIVE
• Positions itself according to its default
position
• Still follows the “normal flow”, maintains
its previous space occupied
• position:relative;
top:50px; left:50px;
box moves 50px down (away from the top
edge), and 50px to the right (away from
the left edge) from its previous position
6.
7. position: absolute
• Element is removed/lifted from the
container element, and positioned
according to the edges of the canvas
• position:absolute;
top:0px; left:0px;
box is attached to the upper-left corner of
the canvas, not the container element
8.
9. position: fixed
• Positioned according to the browser
• Remains fixed, does not scroll with the
content
• position:fixed;
left:0; top:0;
box attaches to the top-left corner, and
does not move with the content when
scrolled
10.
11.
12. floating
• Floating makes objects line up in one
side of its container element, and
allowing other elements to flow around
it
• First used to wrap text around images
13.
14. More on Floating
• Objects will only float as far as its
container element
• When floating block-elements, always
define a width
18. Floating with text
• Add float property to the last box
.samplethree {
background-color:orange;
width:400px;
height:80px;
float:left;
}
19.
20. floating boxes
• Add float property .sampletwo {
background:pink;
also to the first
width:400px;
two height:100px;
float:left
.sample { }
background:yellow;
width:400px;
height:100px;
float:left;
}
21.
22. Float Direction
• Change all to width:400px;
height:60px;
float:right
float:right
.sample {
}
background:yellow;
.samplethree {
width:400px;
background:orange;
height:100px;
width:400px;
float:right;
height:80px;
}
float:right
.sampletwo {
}
background:pink;
23.
24. Clear property
• Clearing an object will turn-off the
floating, thus it will appear below an
element that is floated in that direction
clear:left;
clear:right;
clear:both;
25.
26. Clear in action
• Float only the first width:400px;
height:60px;
box
.sample { float:right;
background:yellow; }
width:400px; .samplethree {
height:100px; background:orange;
float:right; width:400px;
} height:80px;
.sampletwo { float:right;
background:pink; }