Attsf css kt
-
Upload
turp31 -
Category
Technology
-
view
373 -
download
0
description
Transcript of Attsf css kt
![Page 1: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/1.jpg)
4 1 1 3 L I N E S O F S T Y L I N G G O O D N E S S
AT&T Web Storefront CSS
![Page 2: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/2.jpg)
C L E A N S L A T E
CSS Reset
![Page 3: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/3.jpg)
CSS Reset
http://meyerweb.com/eric/tools/css/reset/ The goal of a reset stylesheet is to reduce browser inconsistencies in things
like default line heights, margins and font sizes of headings, and so on
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;
}
![Page 4: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/4.jpg)
M A K E I T G O W H E R E I T N E E D S T O G O
CSS Layout
![Page 5: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/5.jpg)
Grid Layout
Fixed widthgrid-based layoutAt 900 pixels wide
![Page 6: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/6.jpg)
Grid LayoutClass Width
.Col-1 120
.Col-2 276
.Col-3 432
.Col-4 588
.Col-5 744
.Col-6 900
.Col-4 .Col-2
![Page 7: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/7.jpg)
Layout Utility Comparison
.Col-1, .Col-2, .Col-3, .Col-4, .Col-5
Has right margin for column gutter
.Col-1L, .Col-2L, .Col-3L,
.Col-4L, .Col-5L, .Col-6
No right margin
![Page 8: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/8.jpg)
Class Margin-bottom
.Row-H 6
.Row-1 12
.Row-2 24
.Row-3 36
.Row-4 48
.Row-5 60
Grid Layout
Row-3
![Page 9: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/9.jpg)
Normal classesPadding used instead for IE margin collapsing issue
Internet Explore layout considerations
Class Margin-bottom
.Row-H 6
.Row-1 12
.Row-2 24
.Row-3 36
.Row-4 48
.Row-5 60
Class padding-bottom
.Row-PH 6
.Row-P1 12
.Row-P2 24
.Row-P3 36
.Row-P4 48
.Row-P5 60
![Page 10: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/10.jpg)
Similar Layout Utility Classes
.Row-TX classes (“top”) are the similar except that the margin is applied to the top (i.e. .Row-T1 has margin-top:12px)
.R-X classes (“right”) have a right margin (i.e. .R-1 has margin-right:12px)
.L-X classes (“left”) have a left margin (i.e. .L-1 has margin-left:12px)
.Border-B, .Border-L, .Border-T, .Border-B similarly apply a border around the element’s respective edges
![Page 11: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/11.jpg)
A L O O K A T T H E C S S “ Z - I N D E X ” P R O P E R T Y
Stacking Order
![Page 12: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/12.jpg)
Stacking order z-index
Ensures proper layering so that items like menus, popups, modal windows, appear above the content they are supposed to
![Page 13: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/13.jpg)
Stacking order z-index
Class z-index
.jScrollPaneContainer 1
.jScrollArrowUp 1
.jScrollArrowDown 1
.DropdownControl 3
.GlobalNavigation 4
.SubNavigation 70
.GlobalNavigation .Button 80
#overlay 90
.Popup 100
•Items with a higher z-index will appear above items with a lower z-index
![Page 14: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/14.jpg)
Internet Explorer z-index
IE7 renders the stacking order incorrectly
It reorders the z-index if it’s inside of a “positioned” element
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
![Page 15: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/15.jpg)
F L O A T I N G G R A P H I C M E T H O D F O R D Y N A M I C C O N T E N T
Sliding Doors
![Page 16: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/16.jpg)
Sliding Doors (cont.)Wrapping dynamic content
http://www.alistapart.com/articles/slidingdoors/More Info
![Page 17: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/17.jpg)
Sliding Doors
Creates flexible interface components
We need to expand the background images to compensate for that growth. We need to expand the background images to compensate for that growth.
SlidingDoors should have a Wide background image that is
positioned to the right; Overlapping element that has a narrow
background image that is positioned to the left and sits on top of the SlidingDoors background image.
![Page 18: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/18.jpg)
Sliding Doors
CSS
.Button class aligned to the right
.Inside class “floating” to the left
Markup
<span class="Button">
<span class="Inside“>
Button Text Here
</span>
</span>
![Page 19: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/19.jpg)
I T ’ S P R O B A B L Y G O I N G T O M A K E Y O U C R Y
Onion Skinning
![Page 20: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/20.jpg)
CSS3 enhancement
Rounded Corners
Drop Shadow
Compliant Browsers-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 0px 18px #555;
-moz-box-shadow: 0px 0px 18px #555;
![Page 21: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/21.jpg)
Onion Skinning
To achieve this effect in Internet Explorer we need to use an image with the desired effect applied in a image creation program like Photoshop or Gimp.
Rounded rectangle with drop shadow graphic
![Page 22: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/22.jpg)
Our friend Internet Explorer
Square Peg, Round Hole
<div class="Popup shadow-one PopMinIE" id="appPopup"><div class="corner-a"></div><div class="corner-b"></div><div class="shadow-two">
<div class="shadow-three"><div class="shadow-four">
Content Here<div class="ClearFix"></div>
</div></div>
</div></div>
![Page 23: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/23.jpg)
Onion Skinning
http://www.alistapart.com/articles/onionskin/
Multiple layers needed
Each layer reveals part of
the graphic
![Page 24: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/24.jpg)
Onion Skinning
Allows for dynamic content that the edges “shrink wrap” to, but it does create a lot of additional markup
(Not to scale)
![Page 25: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/25.jpg)
O P T I M I Z I N G C O M M O N G R A P H I C S
Sprites
![Page 26: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/26.jpg)
Sprites
Sliding doors spriteArrows sprite
![Page 27: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/27.jpg)
Sprites
Reduces HTTP Requests for many individual images
Greatly improves performance
http://www.alistapart.com/articles/sprites
![Page 28: Attsf css kt](https://reader033.fdocuments.in/reader033/viewer/2022052218/559df5df1a28ab3d7d8b474c/html5/thumbnails/28.jpg)
Sprites
“next” button has background-position: -10px -152px“previous” button has background-position:-10px -212px;
Set dimensionwindow
Arrow Sprite