A detailed look at CSS3 backgrounds including the three key boxes - content-box, padding-box,border-box. The presentation also explores new values - such as space, round, contain and cover. Also covered are three new properties - background-origin, background-clip and background-size. Finally, the presentation explores shorthand CSS3 backgrounds and multiple background images. Not for the faint-hearted!
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Many developers used to believe that class-free, lean markup and descendant selectors were the answer. Many developers still build websites for a single resolution, or a small range of devices. However, these practices are now being questioned. Where do we stand? What is best practice web development today? Russ Weakley will explore these topics and more... or possibly less...
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Many developers used to believe that class-free, lean markup and descendant selectors were the answer. Many developers still build websites for a single resolution, or a small range of devices. However, these practices are now being questioned. Where do we stand? What is best practice web development today? Russ Weakley will explore these topics and more... or possibly less...
CSS3 is the latest standard for CSS.
CSS3 is completely new web technology and widely used by web designers,
This presentation teaches you about the new features in CSS3!
Most designers and front-end developers know how to use CSS 3 features on their DotNetNuke websites. From rounded corners to media queries, CSS 3 is now widely used, but there are many additional useful CSS features you may not be aware of. We will discuss some lesser-known CSS properties—both decorative and functional—and demonstrate how to best integrate them into your skins, containers, and modules.
Imrokraft Solutions Pvt Ltd is one of best center for java training in trivandrum, Kerala. We provide training in advanced java training in trivandrum, Kerala. We also provide android training in trivandrum, php training in trivandrum, angularjs training in trivandrum, angularjs training in technopark, trivandrum, web designing training in technopark, trivandrum. Our Website is http://imrokraft.com. Contact us at: 04716555644, 6555744.
This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
CSS3 is the latest standard for CSS.
CSS3 is completely new web technology and widely used by web designers,
This presentation teaches you about the new features in CSS3!
Most designers and front-end developers know how to use CSS 3 features on their DotNetNuke websites. From rounded corners to media queries, CSS 3 is now widely used, but there are many additional useful CSS features you may not be aware of. We will discuss some lesser-known CSS properties—both decorative and functional—and demonstrate how to best integrate them into your skins, containers, and modules.
Imrokraft Solutions Pvt Ltd is one of best center for java training in trivandrum, Kerala. We provide training in advanced java training in trivandrum, Kerala. We also provide android training in trivandrum, php training in trivandrum, angularjs training in trivandrum, angularjs training in technopark, trivandrum, web designing training in technopark, trivandrum. Our Website is http://imrokraft.com. Contact us at: 04716555644, 6555744.
This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
What are accessible names and why should you care?Russ Weakley
This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
This presentation was fro the AllyBtyes event on 21 May 2020. The presentations looks at a pattern for building or reviewing any new UI component – semantics, focusable, keyboard interaction, visible states, accessible name and relationships.
What is WCAG 2 and why should we care?Russ Weakley
A presentation for IAG staff for the "Future is here" event on 6 May 20202. This presentation covers three topics - "What are our legal responsibilities around accessibility?", "What is WCAG?", and "What is inclusive design?"
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
Building an accessible progressive loaderRuss Weakley
This presentation for A11y Bytes May 2019, takes you through how to mark up a progress loader using the progress element. Then, eight tips for making the progress loader accessible.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
This presentation covers; different types of disabilities, assistive technologies, legal and ethical responsibilities as well as a range of terms such as W3C, WAI and WCAG.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Building an accessible auto-complete - #ID24Russ Weakley
This presentation will take a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for A11yBytes Camp Sydney 2017 takes a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
8. First let’s start with a simple
container with some content
inside. Although we cannot see it,
there is an invisible box around
the content called the
content-box.
19. We can change this default
position using the background-
position property.
p { background-position: 10px 10px; }
20. In CSS2.1, we can use
two values to determine the
position of the background image
in relation to the element.
1 2
p { background-position: 10px 10px; }
21. The first value represents
the horizontal position.
Horizontal axis
p { background-position: 10% 10%; }
22. The second value represents
the vertical axis.
Vertical axis
p { background-position: 10% 10%; }
23. In CSS3, we can specify up to
four values for background-
position.
1 2 3 4
p { background-position:
left 10px top 15px; }
24. The first two values represent
the horizontal axis.
Horizontal axis
p { background-position:
left 10px top 15px; }
25. The second two values
represent the vertical axis.
Vertical axis
p { background-position:
left 10px top 15px; }
26. This is a powerful addition,
as it means we can position
images using length values in
relation to any of the four
corners of elements, not just
the top left corner.
36. By default, images will repeat
along both the x and y axis -
starting from the top left
corner of the padding-box.
37. Even though the background
images start in the top left
corner of the padding-box,
they will repeat outwards in all
directions, including into the
border-box area.
38.
39. In CSS2.1, we could change
the repeat behaviour using
four different keywords.
• repeat
• repeat-x
• repeat-y
• no-repeat
45. In CSS3, we can now define
background-repeat using two
values instead of one.
div { background-repeat:
repeat repeat; }
46. The first of these two values
represents the horizontal axis.
Horizontal axis
div { background-repeat:
repeat repeat; }
47. The second value represents the
vertical axis.
Vertical axis
div { background-repeat:
repeat repeat; }
48. If we use one value only, the
browsers will interpret this as a
double value. This allows the
background-repeat value to be
backwards compatible.
Browser doubles value
div { background-repeat:
repeat [repeat]; }
50. CSS3 also allows us to use
two new values with the
background-repeat property:
• space
• round
51. Browser space round
Firefox 3.6, 4 No No
Safari 4, 5 No No
Chrome 10 No No
IE 6, 7, 8 No No
IE 9 No No
Opera 10, 11 Yes Yes
52. The space value sets the image
to repeat as often as will fit within
the background area and then the
images are spaced out to fill the
area. The first and last images
touch the edges of the area.
p { background-repeat: space; }
54. The round value sets the image
to repeat as often as will fit within
the background area. If it doesn't
fit a whole number of times, it is
rescaled so that it does.
p { background-repeat: round; }
69. The background-clip
property is used to determine
where and if background images
are clipped (or cut off) inside the
background area.
div { background-clip: padding-box; }
70. Browser background-clip
Firefox 3.6 (See notes next slide)
Firefox 4 Yes
Safari 4, 5 -webkit-background-clip
Chrome 10 Yes
IE 6, 7, 8 No
IE 9 Yes
Opera 10, 11 Yes
71. Firefox versions 1.0 to 3.6
support an older syntax:
• border (instead of border-box)
• padding (instead of padding-box)
Note: they do not support content or the
newer content-box values.
Thanks to Louis Lazaris - impressivewebs.com for picking up this FireFox support issue
72. We can clip our background
images via the background-
clip property using three
possible values:
• content-box
• padding-box
• border-box
82. The length value sets the height
and width of the background
image. The first value sets the
width, the second value sets
the height.
Width Height
div { background-size: 10px 20px; }
83. If only one length value
is given, the second value is
set to the ‘initial value’ of auto.
Initial value of auto used
div { background-size: 10px [auto]; }
85. The percentage value sets the
height and width to a percent
of the parent element. The first
value sets the width, the second
value sets the height.
Width Height
div { background-size: 20% 40%; }
86. Like length values, if only one
percentage value is given,
the second is set to the ‘initial
value’ of auto.
Initial value
div { background-size: 10% [auto]; }
88. The contain value will scale the
image (while keeping its aspect
ratio) so that the entire image can
fit inside the background area.
div { background-size: contain; }
91. The cover value will scale the
image (while keeping it’s aspect
ratio) to the smallest size that
will completely covered the
background area.
div { background-size: cover; }
99. CSS3 allows us to place multiple,
comma-separated values into
any background property.
p { Comma after each value
background-image:
url(01.gif),
url(02.gif),
url(03.gif);
}
100. An example of three background
images inside one element -
written in longhand
background-image 1
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
}
101. An example of three background
images inside one element -
written in longhand
background-image 2
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
}
102. An example of three background
images inside one element -
written in longhand
background-image 3
p
{
background-image: url(01.gif), url(02.gif), url(03.gif) ;
background-position: left top, 50% 30%, 10px 100px ;
background-size: auto, 10% auto, auto ;
background-repeat: no-repeat, repeat, repeat-y ;
background-attachment: scroll, scroll, scroll ;
background-origin: padding-box, padding-box, border-box ;
background-clip: border-box, padding-box, border-box ;
}
103. Each of the images is sized,
positioned, and tiled according
to the corresponding value in
the other background
properties.
104. If a property doesn't have enough
comma-separated values to
match the number of layers, the
browser must calculate its used
value by repeating the list of
values until there are enough.
105. Listed values repeated when not
defined by author.
p
{
background-image: url(1.gif), url(2.gif), url(3.gif), url(4.gif) ;
background-size: auto, 10% auto, auto, auto ;
background-repeat: no-repeat, repeat, [no-repeat], [repeat] ;
}
107. The background images are then
displayed in layers - one on top of
each other. The first image in
the list is the layer closest to
the user, the next one is painted
behind the first, and so on.
121. If you are going to use
shorthand properties, you need
to understand initial values,
as these values can affect which
rules will be applied and those
that may not!
122. If we use a shorthand
background property, we
don’t need to define all the
background properties in order
for the rule to work. For example:
Only one background-property defined
p { background: yellow; }
123. However, browsers will add
initial values for any value that
we don’t define.
Initial values added by browser
p { background: [none] [0% 0%] / [auto auto]
[repeat repeat] [scroll] [padding-box]
[border-box] yellow; }
125. Why does all this matter?
You may try to specify two
background rules for the same
element and then wonder why
one of the rules doesn’t work.
Same element
p { background: url(a.gif); }
P { background: yellow; }
126. p {
background: url(a.gif) [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] [transparent];
}
The first rule has a background-image specified.
All other initial values are added by the browser
p {
background: [none] [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] yellow;
}
127. p {
background: url(a.gif) [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] [transparent];
}
As the second rule has no background-image defined,
the browser has set the value to an initial value of none
p {
background: [none] [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] yellow;
}
128. p {
background: url(a.gif) [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] [transparent];
}
The second rule wins, as it is written last.
So, no background image is applied
p {
background: [none] [0% 0%] /
[auto auto] [repeat repeat]
[scroll] [padding-box]
[border-box] yellow;
}
130. All eight background properties
can be combined into a single
shorthand background
property.
131. Multiple shorthand backgrounds
are written in the same way as
single shorthand backgrounds -
with comma’s separating each
background value.
132. A simple example of three
background images inside one
element - written in shorthand.
p background-image 1
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
133. A simple example of three
background images inside one
element - written in shorthand.
p
background-image 2
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
134. A simple example of three
background images inside one
element - written in shorthand.
p
{
background: background-image 3
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
}
135. Just as with the longhand
version, each of the background
images is displayed as a layer -
one on top of each other.
142. If a background-color value is
assigned to any other layer apart
from the final layer, the entire
rule will not be displayed.
143. A background-color assigned
to the final layer only.
p Final layer with background-color assigned
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px yellow;
}
144. It may be safer to add the
background-color as a
separate declaration using the
background-color
property.
145. A background-color
declared separately.
p background-color
{
background:
url(01.gif) no-repeat,
url(02.gif) repeat left bottom,
url(03.gif) repeat-y 10px 5px;
background-color: yellow;
}
147. If you are writing more complex
shorthand rules, you have to
be aware of some browser
quirks and catches.
148. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image] background-image
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
149. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position] Background-position
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
150. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size] Background-size
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
151. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat] Background-repeat
[background-attachment]
[background-origin]
[background-clip]
[background-color];
152. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment] Background-attachment
[background-origin]
[background-clip]
[background-color];
153. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin] Background-origin
[background-clip]
[background-color];
154. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip] Background-clip
[background-color];
155. Theoretically, the correct syntax
for all background properties is:
p
{
background:
[background-image]
[background-position]
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color]; Background-color
156. You may have noticed that there
is a forward slash between
background-position and
background-size.
157. A forward slash separating
position and size.
p
{
background:
[background-image]
[background-position] Slash
[/ background-size]
[background-repeat]
[background-attachment]
[background-origin]
[background-clip]
[background-color];
158. Safari 5, firefox 4, and Chrome 10
all have two problems with rules
written out in full like this.
159. Problem 1:
These browsers ignore the entire
declaration when a forward slash
or background-size values are
included.
160. Problem 2:
These browsers ignore the entire
declaration when two box values
(background-clip and
background-origin) are
included. Only one value can be
included.
161. So, at this time, shorthand
rules are fine for less complex
declarations, but if you want to
include all seven properties, it
may be better to use longhand
for the present.
163. Keep in mind that gradients are a
type of generated image. They
can be used in place of the
url() value.
164. This means you can include
gradients within multiple
backgrounds.
Linear gradient
p
{
background:
url(demo.jpg) no-repeat 0 0,
linear-gradient(left, blue, green);
}
169. The downside of this is that
we cannot add multiple vendor-
specific properties into one
declaration as all browsers would
then ignore the entire
declaration.
170. This means we have to rewrite
the background property for each
vendor-specific property. Any
other background images have
to be included in each
declaration.
171. For example:
p
{
background:
url(demo.jpg) no-repeat 0 0,
-moz-linear-gradient(left, blue, green);
background:
url(demo.jpg) no-repeat 0 0,
-o-linear-gradient(left, blue, green);
background:
url(demo.jpg) no-repeat 0 0,
-webkit-gradient(linear, left top, right top,
from(blue), to(green));
}