Meagan Fisher is a user interface designer and front-end developer who is giving a presentation on using CSS3 to create lifelike web designs inspired by nature. Her presentation includes two parts - in the morning part she will create a mockup using CSS3 techniques like textures, tones, types, shapes and light, and in the afternoon part she will build another page adding more details. She discusses various CSS3 properties that can be used to incorporate elements found in nature like textures, tones, colors, fonts, curved shapes, gradients and shadows to make designs more organic and natural looking.
Mixing Web Components - Paris Web Components - 2015 09-16 Horacio Gonzalez
The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components.
The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents
We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
This presentation provides overview of HTML basics for web development - by Software outsourcing company in India, iFour Technolab Pvt. Ltd. - http://www.ifourtechnolab.com
The second step in the Back to the Basics series covering web development. For this session, we cover markup languages, introduce the document object model, and give a very low level overview of HTML & CSS.
My second talk at Apache Barcamp Spain 2011. It includes a series of starting points about how to get started with CSS3, caveats with CSS3 and some techniques to get up-to-speed with IE.
This presentation (together with our "CSS for non-designers" talk) got the award to the best presentation at Apache Barcamp Spain.
Mixing Web Components - Paris Web Components - 2015 09-16 Horacio Gonzalez
The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components.
The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents
We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
This presentation provides overview of HTML basics for web development - by Software outsourcing company in India, iFour Technolab Pvt. Ltd. - http://www.ifourtechnolab.com
The second step in the Back to the Basics series covering web development. For this session, we cover markup languages, introduce the document object model, and give a very low level overview of HTML & CSS.
My second talk at Apache Barcamp Spain 2011. It includes a series of starting points about how to get started with CSS3, caveats with CSS3 and some techniques to get up-to-speed with IE.
This presentation (together with our "CSS for non-designers" talk) got the award to the best presentation at Apache Barcamp Spain.
CSS3: The Future is Now at Drupal Design Camp BostonJen Simmons
The next generation of CSS is here, and it's being used on thousands of sites. Come learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget making images, do it with CSS.
I cover the state of cross-browser support and tips for implementing graceful fallbacks. I talk about the future and where CSS3 is going. And I provide resources on where to learn more.
For years when designing web sites we'e had to use a lot of of image files--a lot!--for anything and everything. And I’m moving beyond content images here, thinking more about background images for textures, gradients, interesting borders, rounded corners, transparency, drop shadows, interesting fonts, and more.
This contributed to the whole experience being complicated, inflexible, and inefficient, with loads of assets and HTTP requests to deal with. Fast forward to the modern day, and the good news is that CSS now provides us with a lot of new tools for programmatically creating images for many common uses, making things a whole lot easier to handle.
In this talk Chris Mills will touch upon a number of more widely supported featured such as gradients, border-radius, border-image, and box-shadow, before moving on to what we can expect a bit further down the line with more nascent features like shaders, filters and masks. In addition, he will also briefly discuss what can be done about older browsers that do not support such features.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
In this slides I have tried to go through and recap the most interesting topics which have been presented at dotCSS conference at Paris, 2014. See http://dotcss.eu for details.
Essential part of any craft is mastering the tools. Programming is no different.
The talk demonstrates newest and lesser known features of development tools built into Firefox and Chrome.
CSS3: The Future is Now at Drupal Design Camp BostonJen Simmons
The next generation of CSS is here, and it's being used on thousands of sites. Come learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget making images, do it with CSS.
I cover the state of cross-browser support and tips for implementing graceful fallbacks. I talk about the future and where CSS3 is going. And I provide resources on where to learn more.
For years when designing web sites we'e had to use a lot of of image files--a lot!--for anything and everything. And I’m moving beyond content images here, thinking more about background images for textures, gradients, interesting borders, rounded corners, transparency, drop shadows, interesting fonts, and more.
This contributed to the whole experience being complicated, inflexible, and inefficient, with loads of assets and HTTP requests to deal with. Fast forward to the modern day, and the good news is that CSS now provides us with a lot of new tools for programmatically creating images for many common uses, making things a whole lot easier to handle.
In this talk Chris Mills will touch upon a number of more widely supported featured such as gradients, border-radius, border-image, and box-shadow, before moving on to what we can expect a bit further down the line with more nascent features like shaders, filters and masks. In addition, he will also briefly discuss what can be done about older browsers that do not support such features.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
In this slides I have tried to go through and recap the most interesting topics which have been presented at dotCSS conference at Paris, 2014. See http://dotcss.eu for details.
Essential part of any craft is mastering the tools. Programming is no different.
The talk demonstrates newest and lesser known features of development tools built into Firefox and Chrome.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
2. Introduction
✴ My name is Meagan Fisher.
✴ I’m a user interface designer.
✴ I’m also a front-end developer.
✴ I’ve worked with clients big (MTV,
Twitter) and small.
✴ I’ve partnered with lots of awesome
designers, like SimpleBits and
Happy Cog.
✴ I’m hugely obsessed with owls.
Thursday, October 21, 2010
3. My plan for the morning
✴ Part One: Create a
mockup in markup.
Discuss texture, tone,
type, shape, and light
in CSS3.
✴ 9:30 - 10:45, last 15 for
questions
✴ Break time!
✴ Part Two: Build a
secondary page. Add
details with selectors,
bring it to life with
CSS3 experience level
attributes.
✴ 11:30 - 12:45, last 15 for
questions
✴ Lunch time!
Thursday, October 21, 2010
5. why use CSS3?
✴ Make your mockups in
markup.
✴ Create sites that are
more flexible.
✴ Avoid the use of non-
semantic markup.
✴ Use selectors to avoid
excess markup.
✴ Fewer images = faster
load times.
✴ Users on “the good”
browsers will enjoy a
richer experience.
✴ The IE-ers of the future
(who will one day use
IE9) will thank you.
Thursday, October 21, 2010
28. Any two
colors will be
harmonious
when one or
both contain
some of the
other.
- ANDREW LOOMIS
Thursday, October 21, 2010
29. Use CSS3 to blend colors into textures,
highlighting & darkening
certain regions.
There are two methods for using
transparent colors in CSS3:
hsla & rgba.
Thursday, October 21, 2010
30. hsla syntax
.darken {
background: hsla
(240%,50%,50%,.8);
}
Hue is a degree on a color wheel
(0-360), saturation is a percentage,
and lightness is a percentage. The
last value, alpha, determines the
opacity of the color.
Thursday, October 21, 2010
31. rgba syntax
.darken {
background: rgba(0,0,0,.8);
}
Use the rgb color code. The “a” stands
for alpha. This is the level of opacity
the color should have.
Thursday, October 21, 2010
37. The beauty of RGBA is
that it is flexible. Set
the foreground elements
to be transparent, and
they’ll blend with any
background color.
Thursday, October 21, 2010
46. Lastly, add pops
of color that
complement the
color scheme. If
the color only
works with that
theme, group it
accordingly.
#fall a {
color: rgba(81,27,0,.7);
}
#fall #featured h2,
#fall #featured-list h3 {
color: #e8e8af;
}
#fall #featured-list li a {
color: #f79d6c;
}
Thursday, October 21, 2010
50. Jason Santa Maria did a
great writeup about
using the many fonts
now available to web
designers.
http://alistapart.com/
articles/on-web-
typography/
“The best text faces
generally have some
personality, but not so
much that it distracts us
from the content or
experience of reading.
Typefaces that have a lot
of personality are better
reserved for display
sizes, as they can
become cumbersome to
read in longer passages.”
Thursday, October 21, 2010
51. The key to
using it right is
BE SUBTLE
Thursday, October 21, 2010
54. BlackJack: Using an
embellished, fancy-
looking handwritten
font adds to the
handmade feel. The
key is to be subtle,
and use it at a
larger size.
Thursday, October 21, 2010
55. @font-face syntax
Set up a font file to be tied to a font name. Then,
reference it in font-family declarations throughout the
design.
@font-face {
font-family: ‘chunkfiveRegular’;
src: url(‘chunkfiveRegular.ttf’) format(‘truetype’);
}
h2 {
font-family: ‘chunkfiveRegular’, serif;
}
Thursday, October 21, 2010
56. Ah, if only it were that simple.
✴ It’s got to be legal.
✴ IE requires EOT,
other browsers only
like SVG, it’d be
great to use WOFF.
✴ There’s issues with
FOUT, or a flash of
un-styled text.
Thursday, October 21, 2010
60. The Eames
Rocking Chair
Frank Lloyd Wright’s
Guggenheim
Jonathan Ive’s
Apple iPad
The Volkswagen Beetle Naoto Fukasawa’s Plus
Minus Zero Humidifier
Vincent Van Gogh’s
The Starry Night
Thursday, October 21, 2010
61. In web design, we can
use flowing curved
lines with rounded
edges. Border radius
makes this easy.
Thursday, October 21, 2010
63. The story with
vendor prefixes
✴ Pro: Gives us flexibility!
✴ Con: Repetitive, doesn’t
validate.
✴ Pro: Means “in progress,”
eventually they’ll go away.
✴ For more, read: http://
www.alistapart.com/articles/
prefix-or-posthack/
Thursday, October 21, 2010
70. The first way to incorporate
light into your designs is with
gradients.
There are two ways to do this:
CSS3 gradients & .png’s.
Thursday, October 21, 2010
72. Create a library of gradients to
add light to the design
Create a highlight gradient
by making a .png with
solid white to transparent
gradient.
Create a shadow gradient
by making a .png with solid
black to transparent
gradient.
Thursday, October 21, 2010
74. Don’t forget about radial gradients
Radial gradients create the
illusion of a light source
hitting the page.
Add to highlighted areas to
create a soft glow.
#highlighted {
background: rgba
(255,253,219,.25) url(../
img/bg-radial.png) top
50% no-repeat;
}
Thursday, October 21, 2010
75. The key to
using it right is
BE SUBTLE
Thursday, October 21, 2010
78. Using borders and box-shadow together
can create a lighted edge effect, or an
indented effect.
Thursday, October 21, 2010
79. Box-shadow syntax
#highlighted {
-moz-box-shadow:
0px 0px 1px rgba
(0,0,0,8);
-webkit-box-shadow:
0px 0px 1px rgba
(0,0,0,8);
box-shadow: 0px 0px
1px rgba(0,0,0,8);
}
✴ The first value is the horizontal
offset. This can be positive
(right) or negative (left).
✴ The second value is the vertical
offset. This can be positive
(bottom) or negative (top).
✴ The third value is the blur
radius.
✴ The fourth is the color.
Thursday, October 21, 2010
85. Use text-shadow
to give text a
printed feel.
#plant-gallery li {
text-shadow: 0 1px 1px rgba
(0,0,0,.8);
}
Text-shadow uses a simpler
syntax than box-shadow, as there’s
no need for browser prefixes.
Otherwise, the syntax is the same
as box-shadow.
Use a negative vertical
offset and a dark shadow
to imprint lighter text.
Use a positive vertical
offset and a light shadow
to imprint darker text.
Thursday, October 21, 2010
87. Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for
box-shadow & text-shadow
IE9 actually isn’t supporting
text-shadow yet, but we’re
hopeful.
For some box-shadow elements
like inner glows you could
use .png’s, again not really
necessary.
Thursday, October 21, 2010
94. The question of browser support
Chrome Firefox Opera Safari IE
RGBA
Multiple
Backgrounds
Border Radius
Box Shadow
Text Shadow
Font face
YES YES YES YES NO <9
YES YES YES YES NO <9
YES YES YES YES NO <9
YES YES YES YES NO <9
YES YES YES YES NO
YES YES YES YES YES
http://findmebyip.com/litmus/#target-selector
Thursday, October 21, 2010
95. Dealing with IE
Use conditional comments to
create browser specific
stylesheets:
<!--[if lte IE 8]>
<link rel="stylesheet"
media="screen, projection"
href="css/ie.css”>
<![endif]-->
Thursday, October 21, 2010
96. Websites don’t
have to look the
same in every
browser.
- Dan Cederholm
(and a ton of other influential
designers who agree)
Thursday, October 21, 2010
99. Summary of what we
learned so far:
✴ Multiple background images
✴ Colors with CSS3
✴ Border-radius
✴ Font-face
✴ Box-shadow
✴ Text-shadow
Thursday, October 21, 2010
100. Things we’ll learn next
✴ CSS3 Selectors:
what are they, how
can we use them?
✴ Child selectors
✴ Selectors for forms
✴ Psuedo-elements
✴ Attribute selectors
✴ CSS3 and the
experience level:
why it’s awesome.
✴ Transitions for links
✴ Opacity on hover
✴ Transforms for
images
✴ Multiple columns
Thursday, October 21, 2010
107. :first-child syntax
✴ Targets an element
that is the first child
of its parent
#menus li:first-child {
background: url(../
img/bg-star.png) left
50% no-repeat;
}
Thursday, October 21, 2010
108. :last-child syntax
Targets an element that is the last child of its parent.
#recent-entries li:last-child {
border-bottom: none;
}
Thursday, October 21, 2010
109. :nth-child selector
✴ :nth-child - an
element which is the
n-th child of its parent.
✴ :nth-last-child - an
element which is the
n-th child of its parent,
going backwards.
✴ :nth-of-type - an
element which is the
n-th sibiling of its type.
Lets you target an element based on
its location in the document tree.
Thursday, October 21, 2010
114. :checked syntax
✴ For styling a
checked checkbox
or radio button.
#subscribe input:checked + label {
color: rgba(255,255,255,.3);
}
Thursday, October 21, 2010
115. Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for
pseudo-class selectors
Supported in every browser
except the hateful IE.
Include it anyway, to enrich the
design for non-IE users.
Apply it in ways that are “nice,
but not vital.”
You’re going to get sick of this
slide. I’m sorry.
Thursday, October 21, 2010
117. :first-letter syntax
✴ Allows you to style the first
letter on a line. (Hey, dropcaps!)
.article p.intro:first-letter {
font-size: 40px;
font-family: "chunkfive";
float: left;
margin: 14px 5px 0 0;
}
Thursday, October 21, 2010
121. :before & :after syntax
✴ Renders content before or
after the element, which
can be styled.
#marquee a:after {
content: "Go";
background: #c4c381;
padding: 5px 4px 2px 4px;
margin: 0 10px 10px 0;
}
Thursday, October 21, 2010
122. :before & :after syntax
✴ Insert unicode
characters before
or after links.
#menus a:before {
content:" 00BB";
margin-right: 5px;
}
Thursday, October 21, 2010
125. Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for
pseudo-element selectors
Supported in every browser
except the hateful IE.
Include it anyway, to enrich the
design for non-IE users.
Apply it in ways that are “nice,
but not vital.”
I told you you’d get sick of it.
Should I just skip it next time?
Thursday, October 21, 2010
128. attribute selectors
& form elements
✴ The old way:
input.button {
border: none;
}
input.text-input {
color: #ddd;
}
✴ The CSS3 way:
form input
[type="text"] {
border: none;
}
form input
[type="submit"] {
color: #ddd;
}
Thursday, October 21, 2010
129. attribute selectors & links
.article a[href^="mailto:"] {
background: url(../img/bg-mail.png) left 50% no-repeat;
}
.article a[href$=".pdf"] {
background: url(../img/bg-pdf.png) left 50% no-repeat;
}
Thursday, October 21, 2010
130. Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
YES
Browser support for
attribute selectors
Supported in every browser
except the hateful IE.
Include it anyway, to enrich the
design for non-IE users.
Apply it in ways that are “nice,
but not vital.”
You’re going to get sick of this
slide. I’m sorry.
Thursday, October 21, 2010
136. Apply the background +
gradient only to the :hover
#header li a:hover {
background: rgba(255,255,255,.2)
url(../img/bg-gradient.png) repeat-x;
}
Thursday, October 21, 2010
140. Transition syntax
#header li a {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
✴ the property to be transitioned
✴ the duration of the transition
✴ the type of transition
Thursday, October 21, 2010
150. Opacity on elements
Set elements to be slightly opaque, then fade
them in on :hover. Use a transition to fade them
in gradually.
.marquee-feature img { opacity: .75; }
.marquee-feature img:hover {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; }
Thursday, October 21, 2010
154. Rotate transform
Rotate an element a certain number of degrees.
.marquee-feature img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
Thursday, October 21, 2010
157. How about
more playful,
less psychotic?
.marquee-feature img:hover {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
Thursday, October 21, 2010
160. Scale transform
Scale an element a certain percentage.
.marquee-feature img:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
Thursday, October 21, 2010
163. Browser support for
transforms & transitions
Supported in every browser
except the hateful IE.
Include it anyway, to enrich the
design for non-IE users.
Apply it in ways that are “nice,
but not vital.”
One of the last times you’ll have
to hear about IE today from me!
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
YES
YES
NOPE
NOPE
Thursday, October 21, 2010
168. Browser support for
multiple columns
Supported in every browser
except IE & Opera.
Include it anyway, to enrich the
design for everyone else.
Apply it in ways that are “nice,
but not vital.”
Hey, IE’s not alone for once!
Chrome
Firefox
Opera
Safari
IE6 - 8
IE9
YES
YES
NOPE
YES
NOPE
NOPE
Thursday, October 21, 2010
171. For more information:
✴ W3.org/TR/css3-
roadmap/: The W3C’s
working draft of CSS3.
✴ CSS3.info: Tutorials &
news related to CSS3.
✴ CSS3please.com: Handy
generator for many CSS3
elements.
✴ SmashingMagazine.com:
(search CSS3) Several
great articles and
roundups of tutorials,
tools, and cheat sheets.
✴ HandcraftedCSS.com:
Awesome book about
using CSS3 to create
bulletproof websites.
Thursday, October 21, 2010
172. Thank you for listening!
Now become my online friend.
✴ Owltastic.com: My
website and
sometimes blog
✴ Twitter.com/owltastic:
My rambling tweets
✴ Dribbble.com/players/
owltastic: What I’m
working on right now.
✴ Owltastic.tumblr.com:
Images that are
inspiring me.
Thursday, October 21, 2010