Creating Art with Codes - CSS3

•Télécharger en tant que KEY, PDF•

1 j'aime•1,774 vues

Sayanee Basu

Technologie Formation

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));

Contenu connexe

Similaire à 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

Similaire à 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

Plus de 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

Plus de 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

Dernier

[BuildWithAI] Introduction to Gemini.pdfSandro Moreira

Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea

Exploring Multimodal Embeddings with MilvusZilliz

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays

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

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

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney

FWD Group - Insurer Innovation Award 2024The Digital Insurer

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

Ransomware_Q4_2023. The report. [EN].pdfOverkill Security

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot

Architecting Cloud Native ApplicationsWSO2

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays

Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez

Corporate and higher education May webinar.pptxRustici Software

DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity

AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer

Dernier (20)

[BuildWithAI] Introduction to Gemini.pdf

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Exploring Multimodal Embeddings with Milvus

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

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

Strategies for Landing an Oracle DBA Job as a Fresher

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

FWD Group - Insurer Innovation Award 2024

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Ransomware_Q4_2023. The report. [EN].pdf

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

Architecting Cloud Native Applications

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Corporate and higher education May webinar.pptx

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

AXA XL - Insurer Innovation Award Americas 2024

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

Recommandé

Recommandé

Contenu connexe

Similaire à Creating Art with Codes - CSS3

Similaire à Creating Art with Codes - CSS3 (20)

Plus de Sayanee Basu

Plus de Sayanee Basu (12)

Dernier

Dernier (20)

Creating Art with Codes - CSS3

Notes de l'éditeur