W3.CSS Intro
W3.CSS Colors
The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes:
Red
Green
Blue
Black
Pink
Teal
Indigo
Brown
W3.CSS Panels, Notes, and Quotes
The w3-container class can display all kinds of notes and quotes:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
W3.CSS Headers and Footers
The w3-container class also provide solutions for all kinds of headers and footers:
Header
My Footer
Footer information goes here
W3.CSS Alerts
The w3-container class can also be used for all kinds of alerts:
Danger!
Red often indicates a dangerous or potentially negative action.
Warning!
Yellow and orange often indicates a warning that might need attention.
Success!
Green often indicates a successful or positive action.
Info!
Blue often indicates a neutral informative change or action.
W3.CSS Cards
The w3-card classes are suitible for both images and notes:
w3-card-2
w3-card-4
w3-card-8
Header
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)
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-btn class provides buttons of all sizes and types.
The w3-btn-floating buttons are circular and meant for important functions.
W3.CSS Tags and Badges
The w3-tag and w3-badge classes are capable of displaying all kinds of tags, badges and signs:
2 8 A B
New Warning Danger Info
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 Modals
The w3-modal class provides modal dialog in pure HTML:
Modal Image:
W3.CSS Progress Bars
The w3-progressbar class creates progress bars:
W3.CSS Dropdowns
The w3-dropdown classes provide dropdowns:
W3.CSS Accordions
The w3-accordion class provide accordions:
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.
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
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 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:
×
×
×
×
W3.CSS Navigation
The w3-navbar class creates a navigation bar:
The w3-sidenav class creates a side navigation:
W3.CSS Pagination
The w3-pagination class provides a simple way for page navigation:
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
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
Hover over this text! Tooltip content
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.
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
