Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.
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
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.
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
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
This power point is introduce a simple CSS animation
in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation
This article is the first part of a series of articles on using JavaScript tools. Today, JavaScript is a very powerful language that can be used to build web apps, mobile apps, and even some pc games — perhaps a bit faster than you would build them otherwise.
New libraries have emerged in the web industry to address the challenges of JavaScript — libraries such as JQuery, Prototype and many others have been released. Today, a popular question asked by many is — should i learn the libraries such as jQuery or learn basic JavaScript. The truth is that the libraries help you to create faster, responsive JavaScript, but there are still times when your basic knowlege of JavaScript will be called into question. It is for this reason that I have created this eBook, to assist newbies learn JavaScript.
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
Flexbox is a new feature in CSS that drastically changes the way we think about layout. In short, it's magic, and it makes building responsive sites a breeze. Adam will demo flexbox and teach you how a few lines of CSS can get you started building responsive sites with this great new feature!
Ada 2 property pada CSS yang digunakan untuk mengatur Dimensi pada elemen HTML kita, property-nya yaitu width dan height.
Pada video ini, kita akan bahas bagaimana cara menggunakan property tersebut, dan juga unit / satuan apa saja yang dapat kita gunakan untuk mengatur width dan height-nya.
Di video ini juga akan dibahas mengenai overflow, yaitu property CSS yang digunakan untuk mengatur perilaku sebuah elemen, ketika isi / konten nya melebihi tempat / parent nya.
slide bantuan untuk video youtube:
https://youtu.be/VkUSH3SIH0g
This power point is introduce a simple CSS animation
in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation
This article is the first part of a series of articles on using JavaScript tools. Today, JavaScript is a very powerful language that can be used to build web apps, mobile apps, and even some pc games — perhaps a bit faster than you would build them otherwise.
New libraries have emerged in the web industry to address the challenges of JavaScript — libraries such as JQuery, Prototype and many others have been released. Today, a popular question asked by many is — should i learn the libraries such as jQuery or learn basic JavaScript. The truth is that the libraries help you to create faster, responsive JavaScript, but there are still times when your basic knowlege of JavaScript will be called into question. It is for this reason that I have created this eBook, to assist newbies learn JavaScript.
Intro to Flexbox - A Magical CSS PropertyAdam Soucie
Flexbox is a new feature in CSS that drastically changes the way we think about layout. In short, it's magic, and it makes building responsive sites a breeze. Adam will demo flexbox and teach you how a few lines of CSS can get you started building responsive sites with this great new feature!
Ada 2 property pada CSS yang digunakan untuk mengatur Dimensi pada elemen HTML kita, property-nya yaitu width dan height.
Pada video ini, kita akan bahas bagaimana cara menggunakan property tersebut, dan juga unit / satuan apa saja yang dapat kita gunakan untuk mengatur width dan height-nya.
Di video ini juga akan dibahas mengenai overflow, yaitu property CSS yang digunakan untuk mengatur perilaku sebuah elemen, ketika isi / konten nya melebihi tempat / parent nya.
slide bantuan untuk video youtube:
https://youtu.be/VkUSH3SIH0g
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; }