Creating Art with Codes - CSS3

•Als KEY, PDF herunterladen•

1 gefällt mir•1,774 views

Sayanee Basu

Technologie Bildung

1. fancy fonts 5. gradients

2. text-shadow 6. text-stroke

3. rounded-corner 7. background-clip

4. box shadow 8. reﬂection

1. fancy fonts

google web fonts

add to <head> in index.html
<link href='http://fonts.googleapis.com/css?family=Audiowide'
rel='stylesheet' type='text/css'>

add to style.css
font-family: 'Audiowide', cursive;

2. text-shadow

text-shadow: <offset-x1> <offset-y1> <blur-radius1> <color1>,
<offset-x2> <offset-y2> <blur-radius2> <color2>;

text-shadow: 0px 1px 0px #999,
0px 2px 0px #888,
0px 3px 0px #777,
0px 4px 0px #666,
0px 5px 0px #555,
0px 6px 0px #444,
0px 7px 0px #333,
0px 8px 7px #001135;

3. rounded corners
box-radius: <length>; /* equal rounded corners */

border-top-left-radius: <length>;
border-top-right-radius: <length>;
border-bottom-right-radius: <length>;
border-bottom-left-radius: <length>;

border-radius:10px;

4. box shadow
box-radius: <length>; /* equal rounded corners */

border-top-left-radius: <length>;
border-top-right-radius: <length>;
border-bottom-right-radius: <length>;
border-bottom-left-radius: <length>;

border-radius:10px;

5. gradients
background-image: -webkit-gradient
(<type>, <left> <top>, <left> <bottom>,
from(<color>),
to(<color>);

background-image: -webkit-gradient(linear, left top, left bottom,
from(hsl(0, 80%, 70%)),
to(#BADA55));

6. text-stroke
-webkit-text-stroke: <width> <color>;

-webkit-text-stroke: 1px rgba(0,0,0,0.7);

7. background-clip
-webkit-background-clip: text;

background-image:url(text-bg.jpg);
-webkit-background-clip: text;
color:transparent;

8. reﬂection
box-reflect: <direction> <offset> <mask-box>;

-webkit-box-reflect: below
10px
-webkit-gradient(linear,
left 60%, left bottom,
from(transparent), to(white));

Weitere ähnliche Inhalte

Ähnlich wie Creating Art with Codes - CSS3

The Basics of CSS3joshsurovey

Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts

CSS3Chathuranga Jayanath

Sass compassNick Cooley

Managing responsive websites with css preprocessors. The University of Akron

"Conditionally adaptive" Vadim MakeevFwdays

Sass & Compass (Barcamp Stuttgart 2012)emrox

Css3 101Ignacio Coloma

Learn to Love CSS3 [English]ThemePartner

HTML Web Devlopment presentation css.pptraghavanp4

css.pptDakshPratapSingh1

css.pptSana903754

Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Adam Darowski

LessCSS Presentation @ April 2015 GTALUG MeetingMyles Braithwaite

Web Design ReduxJohn Griffiths

HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventRobert Nyman

Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda

Presentation html5 css3 by thibautThibaut Baillet

Css3Vladimir Varun

Theming and SassJames Pearce

Ähnlich wie Creating Art with Codes - CSS3 (20)

The Basics of CSS3

Implementing Awesome: An HTML5/CSS3 Workshop

CSS3

Sass compass

Managing responsive websites with css preprocessors.

"Conditionally adaptive" Vadim Makeev

Sass & Compass (Barcamp Stuttgart 2012)

Css3 101

Learn to Love CSS3 [English]

HTML Web Devlopment presentation css.ppt

css.ppt

Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)

LessCSS Presentation @ April 2015 GTALUG Meeting

Web Design Redux

HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event

Responsive Web Design e a Ubiquidade da Web

Presentation html5 css3 by thibaut

Css3

Theming and Sass

Mehr von Sayanee Basu

RaspberryPI + Google CoderSayanee Basu

My Adventures in Slovenia, Croatia, Serbia and HungarySayanee Basu

Using Sass - Building on CSSSayanee Basu

Evolution of Programming LanguagesSayanee Basu

CinemagraphSayanee Basu

Web Frameworks for 6 year oldsSayanee Basu

Responsive Web DesignSayanee Basu

Summer & Winter in SloveniaSayanee Basu

Open CommunitySayanee Basu

From Singapore to SloveniaSayanee Basu

Open Community - The Future of ConnectingSayanee Basu

Colors of the SkySayanee Basu

Mehr von Sayanee Basu (12)

RaspberryPI + Google Coder

My Adventures in Slovenia, Croatia, Serbia and Hungary

Using Sass - Building on CSS

Evolution of Programming Languages

Cinemagraph

Web Frameworks for 6 year olds

Responsive Web Design

Summer & Winter in Slovenia

Open Community

From Singapore to Slovenia

Open Community - The Future of Connecting

Colors of the Sky

Kürzlich hochgeladen

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

Manulife - Insurer Innovation Award 2024The Digital Insurer

HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics

Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services

Why Teams call analytics are critical to your entire businesspanagenda

Artificial Intelligence: Facts and MythsJoaquim Jorge

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

presentation ICT roal in 21st century educationjfdjdjcjdnsjd

Apidays New York 2024 - The value of a flexible API Management solution for O...apidays

Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi

MINDCTI Revenue Release Quarter One 2024MIND CTI

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Real Time Object Detection Using Open CVKhem

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

Kürzlich hochgeladen (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

AWS Community Day CPH - Three problems of Terraform

Exploring the Future Potential of AI-Enabled Smartphone Processors

Artificial Intelligence Chap.5 : Uncertainty

Axa Assurance Maroc - Insurer Innovation Award 2024

Manulife - Insurer Innovation Award 2024

HTML Injection Attacks: Impact and Mitigation Strategies

Strategies for Landing an Oracle DBA Job as a Fresher

Why Teams call analytics are critical to your entire business

Artificial Intelligence: Facts and Myths

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

presentation ICT roal in 21st century education

Apidays New York 2024 - The value of a flexible API Management solution for O...

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams

MINDCTI Revenue Release Quarter One 2024

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Real Time Object Detection Using Open CV

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Creating Art with Codes - CSS3

1. ART WITH CSS3

2. www.sayan.ee coder explorer speaker

3. 1. fancy fonts 5. gradients 2. text-shadow 6. text-stroke 3. rounded-corner 7. background-clip 4. box shadow 8. reﬂection

4. 1. fancy fonts google web fonts add to <head> in index.html <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'> add to style.css font-family: 'Audiowide', cursive;

5. 2. text-shadow text-shadow: <offset-x1> <offset-y1> <blur-radius1> <color1>, <offset-x2> <offset-y2> <blur-radius2> <color2>; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;

6. 3. rounded corners box-radius: <length>; /* equal rounded corners */ border-top-left-radius: <length>; border-top-right-radius: <length>; border-bottom-right-radius: <length>; border-bottom-left-radius: <length>; border-radius:10px;

7. 4. box shadow box-radius: <length>; /* equal rounded corners */ border-top-left-radius: <length>; border-top-right-radius: <length>; border-bottom-right-radius: <length>; border-bottom-left-radius: <length>; border-radius:10px;

8. 5. gradients background-image: -webkit-gradient (<type>, <left> <top>, <left> <bottom>, from(<color>), to(<color>); background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55));

9. 6. text-stroke -webkit-text-stroke: <width> <color>; -webkit-text-stroke: 1px rgba(0,0,0,0.7);

10. 7. background-clip -webkit-background-clip: text; background-image:url(text-bg.jpg); -webkit-background-clip: text; color:transparent;

11. 8. reﬂection box-reflect: <direction> <offset> <mask-box>; -webkit-box-reflect: below 10px -webkit-gradient(linear, left 60%, left bottom, from(transparent), to(white));

12. thanks!

Creating Art with Codes - CSS3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Creating Art with Codes - CSS3

Ähnlich wie Creating Art with Codes - CSS3 (20)

Mehr von Sayanee Basu

Mehr von Sayanee Basu (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Creating Art with Codes - CSS3

Hinweis der Redaktion