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

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

Artificial intelligence in cctv survelliance.pptxhariprasad279825

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

Time Series Foundation Models - current state and future directionsNathaniel Shimoni

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3

WordPress Websites for Engineers: Elevate Your Brandgvaughan

TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey

Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited

Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro

"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays

"ML in Production",Oleksandr BaganFwdays

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

Take control of your SAP testing with UiPath Test SuiteDianaGray10

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech

Training state-of-the-art general text embeddingZilliz

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell

Kürzlich hochgeladen (20)

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx

Artificial intelligence in cctv survelliance.pptx

Anypoint Exchange: It’s Not Just a Repo!

Time Series Foundation Models - current state and future directions

Developer Data Modeling Mistakes: From Postgres to NoSQL

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx

WordPress Websites for Engineers: Elevate Your Brand

TeamStation AI System Report LATAM IT Salaries 2024

Ensuring Technical Readiness For Copilot in Microsoft 365

Unraveling Multimodality with Large Language Models.pdf

"Debugging python applications inside k8s environment", Andrii Soldatenko

"ML in Production",Oleksandr Bagan

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack

Take control of your SAP testing with UiPath Test Suite

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy

The Ultimate Guide to Choosing WordPress Pros and Cons

Training state-of-the-art general text embedding

DevEX - reference for building teams, processes, and platforms

DSPy a system for AI to Write Prompts and Do Fine Tuning

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