W3.CSS Intro
❮ Previous Next ❯
W3.CSS Colors
The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes:
W3.CSS Containers
The w3-container class is the most important of the W3.CSS classes. It provides equality like:
Common margins
Common paddings
Common vertical alignments
Common horizontal alignments
Common fonts
Common colors
The w3-container class is typically used with HTML container elements, like:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.
This is a Header
This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.
This is a footer.
W3.CSS Panels, Notes, and Quotes
The w3-panel class can display all kinds of notes and quotes:
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
"Make it as simple as possible, but not simpler."
Albert Einstein
W3.CSS Alerts
The w3-panel class can also be used for all kinds of alerts:
×
Danger!
Red often indicates a dangerous or negative situation.
×
Warning!
Yellow often indicates a warning that might need attention.
×
Success!
Green often indicates something successful or positive.
×
Info!
Blue often indicates a neutral informative change or action.
W3.CSS Cards
The w3-card classes are suitible for both images and notes:
A Car
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.
(Wikipedia)
Amazing
Trolltunga, Norway
W3.CSS Tables
The w3-table classes can handle all kinds of tables:
First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Anja Bore 100
W3.CSS Lists
The w3-ul class can handle all kinds of lists:
× Mike
Web Designer
× Jill
Support
× Jane
Accountant
× Jack
Advisor
W3.CSS Buttons
The w3-button and w3-btn class provides buttons of all sizes and types.
Button Button Button Button Button Button Disabled
Button Button Button Button Button Button
Wide buttons:
Button
Button
One Two Three
Circular or square buttons:
+ + +
+ + +
W3.CSS Tags, Labels; Badges, And Signs
The w3-tag and the w3-badge classes are capable of displaying all kinds of tags, labels, badges and signs:
2 8 A B
New Warning Danger Info
Falcon Ridge Parkway
S
A
L
E
DO NOT
BREATHE
UNDER WATER
W3.CSS Responsive
The responsive grid classes provide responsiveness for all device types: PC, laptop, tablet, and mobile.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
W3.CSS also supports a 12 column mobile-first fluid grid with small, medium, and large classes.
W3.CSS Display
The w3-display-classes allow you to display HTML elements in specific positions:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle
W3.CSS Modals
The w3-modal class provides modal dialog in pure HTML:
Click to Open Modal
×
Header
Some text. Some text. Some text.
Some text. Some text. Some text.
Footer
Modal Image:
×
W3.CSS Progress Bars
Read more at W3.CSS Progress Bars
25%
50%
0
Click Me
W3.CSS Dropdowns
The w3-dropdown classes provide dropdowns:
Hover Me!
Link 1 Link 2 Link 3
Click Me!
Link 1 Link 2 Link 3
W3.CSS Accordions
Read more at W3.CSS Accordions
Open Section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Open Section 2
Link 1 Link 2 Link 3
Open Section 3
Accordion with Images:
Trolltunga, Norway
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London Paris Tokyo
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabbed Image Gallery:
×
Nature
×
Fjords
×
Mountains
×
Northern Lights
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Home Link 1 Link 2 Link 3
Navigation bar with input:
Home Link 1 Link 2
Search..
Go
Navigation bar with dropdown:
Home Link 1
Dropdown
Link 1 Link 2 Link 3
Customized bars:
Home Link 1 Link 2
Home Link 1 Link 2 Link 3
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
« 1 2 3 4 5 »
❮ Previous Next ❯
❮ ❯
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
1 / 3
Beautiful Nature
2 / 3
Trolltunga, Norway
3 / 3
Mountains
❮
❯
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
×
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
Top Bottom Left Right Fade In Zoom Spin
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
W3.CSS Images
Styling images in W3CSS is easy:
Nature
W3.CSS Effects
Add special effects to any element:
Normal
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:

Name

Country

One

Two

Three

Click on me!
Input Form

Name

Email

Subject
 Milk
 Sugar
 Lemon (Disabled)
Input Form

Name

Email

Subject
 Male
 Female
 Don't know (Disabled)
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:

Search for names..
Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
Making the web beautiful!
Making the web!
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Mobile Color Themes
The predefined color themes are specially suitable for mobile web applications.
Theme Indigo
Movies 2014
Frozen
The response to the animations was ridiculous
The Fault in Our Stars
Touching, gripping and genuinely well made
The Avengers
A huge success for Marvel and Disney
«»
Theme Teal
Movies 2014
Frozen
The response to the animations was ridiculous
The Fault in Our Stars
Touching, gripping and genuinely well made
The Avengers
A huge success for Marvel and Disney
«»
❮ Previous Next ❯
❮ Previous Next ❯
W3.CSS Colors
The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes:
W3.CSS Containers
The w3-container class is the most important of the W3.CSS classes. It provides equality like:
Common margins
Common paddings
Common vertical alignments
Common horizontal alignments
Common fonts
Common colors
The w3-container class is typically used with HTML container elements, like:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.
This is a Header
This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.
This is a footer.
W3.CSS Panels, Notes, and Quotes
The w3-panel class can display all kinds of notes and quotes:
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
"Make it as simple as possible, but not simpler."
Albert Einstein
W3.CSS Alerts
The w3-panel class can also be used for all kinds of alerts:
×
Danger!
Red often indicates a dangerous or negative situation.
×
Warning!
Yellow often indicates a warning that might need attention.
×
Success!
Green often indicates something successful or positive.
×
Info!
Blue often indicates a neutral informative change or action.
W3.CSS Cards
The w3-card classes are suitible for both images and notes:
A Car
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.
(Wikipedia)
Amazing
Trolltunga, Norway
W3.CSS Tables
The w3-table classes can handle all kinds of tables:
First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Anja Bore 100
W3.CSS Lists
The w3-ul class can handle all kinds of lists:
× Mike
Web Designer
× Jill
Support
× Jane
Accountant
× Jack
Advisor
W3.CSS Buttons
The w3-button and w3-btn class provides buttons of all sizes and types.
Button Button Button Button Button Button Disabled
Button Button Button Button Button Button
Wide buttons:
Button
Button
One Two Three
Circular or square buttons:
+ + +
+ + +
W3.CSS Tags, Labels; Badges, And Signs
The w3-tag and the w3-badge classes are capable of displaying all kinds of tags, labels, badges and signs:
2 8 A B
New Warning Danger Info
Falcon Ridge Parkway
S
A
L
E
DO NOT
BREATHE
UNDER WATER
W3.CSS Responsive
The responsive grid classes provide responsiveness for all device types: PC, laptop, tablet, and mobile.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
rest
1/4
rest
100px
45px
rest
W3.CSS also supports a 12 column mobile-first fluid grid with small, medium, and large classes.
W3.CSS Display
The w3-display-classes allow you to display HTML elements in specific positions:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle
W3.CSS Modals
The w3-modal class provides modal dialog in pure HTML:
Click to Open Modal
×
Header
Some text. Some text. Some text.
Some text. Some text. Some text.
Footer
Modal Image:
×
W3.CSS Progress Bars
Read more at W3.CSS Progress Bars
25%
50%
0
Click Me
W3.CSS Dropdowns
The w3-dropdown classes provide dropdowns:
Hover Me!
Link 1 Link 2 Link 3
Click Me!
Link 1 Link 2 Link 3
W3.CSS Accordions
Read more at W3.CSS Accordions
Open Section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Open Section 2
Link 1 Link 2 Link 3
Open Section 3
Accordion with Images:
Trolltunga, Norway
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London Paris Tokyo
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabbed Image Gallery:
×
Nature
×
Fjords
×
Mountains
×
Northern Lights
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Home Link 1 Link 2 Link 3
Navigation bar with input:
Home Link 1 Link 2
Search..
Go
Navigation bar with dropdown:
Home Link 1
Dropdown
Link 1 Link 2 Link 3
Customized bars:
Home Link 1 Link 2
Home Link 1 Link 2 Link 3
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
« 1 2 3 4 5 »
❮ Previous Next ❯
❮ ❯
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
1 / 3
Beautiful Nature
2 / 3
Trolltunga, Norway
3 / 3
Mountains
❮
❯
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
×
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
Top Bottom Left Right Fade In Zoom Spin
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
W3.CSS Images
Styling images in W3CSS is easy:
Nature
W3.CSS Effects
Add special effects to any element:
Normal
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:

Name

Country

One

Two

Three

Click on me!
Input Form

Name


Subject
 Milk
 Sugar
 Lemon (Disabled)
Input Form

Name


Subject
 Male
 Female
 Don't know (Disabled)
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:

Search for names..
Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
Making the web beautiful!
Making the web!
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Mobile Color Themes
The predefined color themes are specially suitable for mobile web applications.
Theme Indigo
Movies 2014
Frozen
The response to the animations was ridiculous
The Fault in Our Stars
Touching, gripping and genuinely well made
The Avengers
A huge success for Marvel and Disney
«»
Theme Teal
Movies 2014
Frozen
The response to the animations was ridiculous
The Fault in Our Stars
Touching, gripping and genuinely well made
The Avengers
A huge success for Marvel and Disney
«»
❮ Previous Next ❯
No comments:
Post a Comment