Paint the Web creating art with CSS Eva Lettner Frontend Developer - PowerPoint PPT Presentation

Apr 21, 2023 •234 likes •566 views

Paint the Web creating art with CSS Eva Lettner Frontend Developer @ ChillBill Coding "Artist" Code is magic We are Creators! CSS Original: https://www.instagram.com/365days.of.cacti/ Lets draw something! Shapes

Paint the Web creating art with CSS
Eva Lettner Frontend Developer @ ChillBill Coding "Artist"
Code is magic
We are Creators!
♥ CSS ♥
Original: https://www.instagram.com/365days.of.cacti/
Lets draw something!
Shapes
Rectangles .rectangle { width: 20rem; height: 20rem; }
Triangles .triangle { border-top: 10rem solid yellow; border-left: 10rem solid orange; border-bottom: 10rem solid purple; border-right: 10rem solid blue; }
Pseudo Elements
:before & :after before after
I'm a 1 div tooltip!
Box-Shadow
.eye { box-shadow: 0px 0px 0px #798d52, inset 0px 0px 0px #798d52; }
Why?
Why not?
It's fun!
Learn new stuff!
Community ♥
CSS images in production?
What did we learn?
Play
Learn
Just because it's "useless" doesn't mean it's a waste of time
Resources Codepen: http://www.codepen.io #cssdailyimages
Create! @eva_trostlos

Download Presentation

Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

Generic types Paint design Please sit with your Paint project partner Solutions to HW6

Generic types Paint design Please sit with your Paint project partner Solutions to HW6 written problems and DotsUML should be in the usual place on ANGEL: Lessons > Assignments > Solutions Today: Statics revisited

622 views • 16 slides

How To: Make Your Own Paint By: Ivy Winter Flour Based Paint Materials: Mixing bowl 8 fluid

How To: Make Your Own Paint By: Ivy Winter Flour Based Paint Materials: Mixing bowl 8 fluid ounces warm water 12 ounces white flour 12 ounces table salt Squeeze bottles or resealable plastic bags Food coloring Flour Based Paint

288 views • 17 slides

A.S.Khanna Corrosion Science & Engineering IIT Bombay What do we mean by Paint Specification

How to Write Paint Specifications A.S.Khanna Corrosion Science & Engineering IIT Bombay What do we mean by Paint Specification Protecting a surface with a paint coating that takes care of the requirements of a user Requirements

782 views • 28 slides

PAINT CHARACTERISTICS Prof. A.S.Khanna Corrosion Science & Engg. IIT Bombay Various Kinds

PAINT CHARACTERISTICS Prof. A.S.Khanna Corrosion Science & Engg. IIT Bombay Various Kinds of Tests for paint Coatings Paint Characterization Volume solid, Density, viscosity, drying and curing properties, in case of two components

1.59k views • 39 slides

Slide into January Intel Chip Paint a 2" wooden square dark gray. Let dry. When the paint

~.,...,_SI"'_ Slide into January Intel Chip Paint a 2" wooden square dark gray. Let dry. When the paint dries, paint in white "Intel". Let dry. Then attach a piece of PVC pipe to the back with hot glue. Computer Mouse Using

404 views • 12 slides

Paint coverage/opacity (whites & off -whites with Resene Alabaster as the example)

Paint coverage/opacity (whites & off -whites with Resene Alabaster as the example) Introduction There are a number of areas that can contribute to paint coverage /opacity issues including over-spreading of paint, application methods

421 views • 20 slides

Overview of paint systems for exterior steel based on the AS/NZS2312 standards Paint Systems for

Overview of paint systems for exterior steel based on the AS/NZS2312 standards Paint Systems for Mild Steel Equivalents to AS/NZS 2312.1:2014 Starting Point To select the correct coating system first you must know the type of steel you

772 views • 15 slides

Curing of Waterborne paint (focusing on interior) General paint curing methods Waterborne

Curing of Waterborne paint (focusing on interior) General paint curing methods Waterborne Evaporation Oil based Oxidation (reacts with oxygen) 2K Epoxy/Urethane Chemical reaction Moisture cured polys Reaction with moisture in

1.2k views • 14 slides

Inspecting for Lead-based Paint Chapter 1 Course Overview Lead Inspector Chapter 1

Inspecting for Lead-based Paint Chapter 1 Course Overview Lead Inspector Chapter 1 Course Overview Course Purpose To train inspectors to identify lead in paint (lead-based paint inspections) dust and soil (clearance

1.97k views • 158 slides

LEAD PAINT REFORMULATION TECHNICAL GUIDELINES Amman, 31.03.2019. Vojislavka Satric CONTENT 1.

LEAD PAINT REFORMULATION TECHNICAL GUIDELINES Amman, 31.03.2019. Vojislavka Satric CONTENT 1. Technical Guidelines Content; 2. Colours and Paint Function; 3. Paint Raw Materials; 4. Lead Compounds in Paints; 5. Substitution Process; 6.

519 views • 28 slides

to Eliminate Lead Paint: Why Action Now Matters Briefing on the Global Alliance to Eliminate Lead

Overview of Global Efforts to Eliminate Lead Paint: Why Action Now Matters Briefing on the Global Alliance to Eliminate Lead Paint for Permanent Missions Geneva, Switzerland June 12, 2018 Walker B. Smith, Director Office of Global Affairs and

612 views • 27 slides

Overview of Global Efforts to Eliminate Lead Paint: Why Action Now Matters UN Environment GEF

Overview of Global Efforts to Eliminate Lead Paint: Why Action Now Matters UN Environment GEF Lead Paint Project Regional Workshop for Central and Eastern Europe and Central Asia March 19, 2019 Walker B. Smith, Director Office of Global

382 views • 12 slides

Industrial Industry Energy Demand Increases 250 Quadrillion BTUs 200 Paint Paint Fertilizer

Industrial Industry Energy Demand Increases 250 Quadrillion BTUs 200 Paint Paint Fertilizer Fertilizer Plastics Plastics 150 Chemicals Textiles Textiles 100 Automobiles Automobiles Steel Steel Manufacturing & Industry

583 views • 37 slides

Paint Mesh Cutting Lubin Fan Ligang Liu Kun Liu Zhejiang University Outline Related work

Paint Mesh Cutting Lubin Fan Ligang Liu Kun Liu Zhejiang University Outline Related work & Motivation Basic algorithm Graph cuts based optimization Paint mesh cutting system Global and local optimization Results

656 views • 49 slides

Low-level vision: shading, paint, and texture Bill Freeman October 27, 2008 Why shading,

Low-level vision: shading, paint, and texture Bill Freeman October 27, 2008 Why shading, paint, and texture matters in object recognition We want to recognize objects independently from surface colorings lighting surface

1.73k views • 145 slides

Poisonings from Housing Renovations Containing Lead Paint: e o at o s Co ta g ead a t A

Poisonings from Housing Renovations Containing Lead Paint: e o at o s Co ta g ead a t A Regulatory Update Delaware Healthy Homes Summit March 12, 2014 Presented by: Demian P. Ellis, USEPA Region 3 What will be covered What will be

872 views • 50 slides

Neutrino physics imprinted in the Cosmic Microwave Background Manoj Kaplinghat University of

Neutrino physics imprinted in the Cosmic Microwave Background Manoj Kaplinghat University of California Irvine Massive Neutrinos and Cosmology: Overview Masses, number, BSM scattering, large asymmetry Early phase Lensed CMB BBN

556 views • 27 slides

TAOS MAINSTREET ACCELERATOR Economic Vitality N E W M E X I C O M A I N S T R E E T | A P r o g

TAOS MAINSTREET ACCELERATOR Economic Vitality N E W M E X I C O M A I N S T R E E T | A P r o g r a m o f t h e N e w M e x i c o E c o n o m i c D e v e l o p m e n t D e p a r t m e n t Introductions EV Overview Presentation

423 views • 16 slides

NEMPAC 2020 Election Update November 5, 2020 Pr President - El Elect ctoral Vote (EV EV)

NEMPAC 2020 Election Update November 5, 2020 Pr President - El Elect ctoral Vote (EV EV) 270 270 Needed to Win President Trump: 214 Former Vice President Joe Biden: 264 Pennsylvania (20 EV), North Carolina (15 EV), Georgia

341 views • 20 slides

European Outlook : Paris Colliers International France June 13, 2018 Colliers International

European Outlook : Paris Colliers International France June 13, 2018 Colliers International France KEY FIGURES 65 Ms 2 nd 260 20 11,4 % employees years Tenant Rep. market share revenue in Paris, Lyon, of experience in Paris

354 views • 24 slides

Datastructures Data Structures Datatype A model of something that we want to represent

Datastructures Data Structures Datatype A model of something that we want to represent in our program Data structure A particular way of storing data How? Depending on what we want to do with the data Today: Two

586 views • 43 slides

Formal Verification for an Internet of Secured Things Tutorial at the 3 rd World Congress on Formal

Formal Verification for an Internet of Secured Things Tutorial at the 3 rd World Congress on Formal Methods, 2019 Allan Blanchard, Nikolai Kosmatov, Fr ed eric Loulergue some slides authored by Julien Signoles Email: allan.blanchard@cea.fr,

1.69k views • 154 slides

I Told You So! What every developer should know about Enterprise Architecture Agata

I Told You So! What every developer should know about Enterprise Architecture Agata Przybyszewska What every developer should know about Enterprise Architecture Difference between building the right thing, and building the thing right.

753 views • 39 slides

GE GEO Profile Lower & Upper Atmosphere Research Atmospheric & Geospace Lower

GE GEO Profile Lower & Upper Atmosphere Research Atmospheric & Geospace Lower Atmosphere & Geospace Facilities Sciences NCAR Deep Earth Processes Earth Sciences Surface Earth Processes Infrastructure

495 views • 3 slides