This document provides an agenda and overview for a presentation on CSS3 features including new selectors, properties, and techniques for cross-browser compatibility. It explores CSS3 modules like color, opacity, text effects, fonts, shadows, borders, and images. The presentation examines properties such as RGBA, text-overflow, text-selection, columns, @font-face, text-shadow, box-shadow, border-image, and techniques for implementing these features across browsers. Lessons are provided on browser support and workarounds for older browsers.
There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation
It's Business Time: Givin' User Experience Love with CSS3Denise Jacobs
Advanced CSS and CSS3 can add richness to your site’s experience layer by enhancing interactivity. While the CSS3 specification as a whole is still in flux, but you can still use many CSS3 properties today. Regardless of the project, anyone can inject flexible techniques that enrich the interactions built into websites.
Mobile applications Development - Lecture 11
CSS3 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
There are four tasks to complete in this workshop. They are listed below and can be accessed from the JohnAllanSandbox course on Desire2Learn, in the Table of Content. Please complete these in this order.
1. HTML Review Activity
2. Creating an image link
3. Attributes
4. Lists
CSS3 isn't the future, it's the present, and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
HTML Basics
Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML page to display in a web browser.
Dominik Veselý - Vše co jste kdy chtěli vědět o CI a báli jste se zeptatmdevtalk
Continuous Integration je velice důležité, leč často opomíjené téma. Většina lidí má tento termín zažitý jako něco co je složité a patří to do velkých společností. Opak je pravdou, CI můžete využívat i jako freelancer nebo malá společnost velice jednoduše. Ať už ho chcete používat k testování, nasazování, doručování buildu nebo notifikacím, ušetří Vám to hodně času a peněz. Dominik se věnuje problematice CI pro mobilní vývoj již více jak 2 roky a se svými kolegy vyrobil CI pipeline pro iOS, Android i backend, která šetří stovky minut denně celému týmu. Ve svém talku se zaměří, jak na mobilní platformy, tak na backendy a frontendy, aby si na své přišel opravdu každý.
HTML5 and CSS3 have taken shape and are being put to use everyday. What does this mean for you and how do you know if you are leveraging them correctly? Shay Howe, user interface engineer at Groupon, will break down HTML5 and CSS3 showing you how to build a better user interface and improve the over all user experience. New HTML5 input types and CSS3 rounded corners are just the begging, learn what else can help bring your website to the next level.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation
It's Business Time: Givin' User Experience Love with CSS3Denise Jacobs
Advanced CSS and CSS3 can add richness to your site’s experience layer by enhancing interactivity. While the CSS3 specification as a whole is still in flux, but you can still use many CSS3 properties today. Regardless of the project, anyone can inject flexible techniques that enrich the interactions built into websites.
Mobile applications Development - Lecture 11
CSS3 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
There are four tasks to complete in this workshop. They are listed below and can be accessed from the JohnAllanSandbox course on Desire2Learn, in the Table of Content. Please complete these in this order.
1. HTML Review Activity
2. Creating an image link
3. Attributes
4. Lists
CSS3 isn't the future, it's the present, and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
HTML Basics
Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML page to display in a web browser.
Dominik Veselý - Vše co jste kdy chtěli vědět o CI a báli jste se zeptatmdevtalk
Continuous Integration je velice důležité, leč často opomíjené téma. Většina lidí má tento termín zažitý jako něco co je složité a patří to do velkých společností. Opak je pravdou, CI můžete využívat i jako freelancer nebo malá společnost velice jednoduše. Ať už ho chcete používat k testování, nasazování, doručování buildu nebo notifikacím, ušetří Vám to hodně času a peněz. Dominik se věnuje problematice CI pro mobilní vývoj již více jak 2 roky a se svými kolegy vyrobil CI pipeline pro iOS, Android i backend, která šetří stovky minut denně celému týmu. Ve svém talku se zaměří, jak na mobilní platformy, tak na backendy a frontendy, aby si na své přišel opravdu každý.
HTML5 and CSS3 have taken shape and are being put to use everyday. What does this mean for you and how do you know if you are leveraging them correctly? Shay Howe, user interface engineer at Groupon, will break down HTML5 and CSS3 showing you how to build a better user interface and improve the over all user experience. New HTML5 input types and CSS3 rounded corners are just the begging, learn what else can help bring your website to the next level.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
CSS3: The Future is Now at DrupalCon San FranciscoJen Simmons
The next generation of CSS is here, and it's being used on thousands of sites. Learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget making images, do it with CSS.
We finally have a support of the CSS @font-face rule, on most browsers on the market. There will be an overview of their implementations, advantages and constraints that this brings, as well as some good practices for its use.
(This is a translation of my original french presentation http://www.slideshare.net/yvg/css-fontface-des-polices-personnalises)
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.
HTML5 and CSS3 offer some great features that everyone is clamoring to use. However, not everyone can simply rip apart their site and redo all of their markup and styling across the board. There are some quick wins, especially with CSS3, to be had that you can integrate into your site without rewriting your whole entire site.
In this talk, Chris Mills from Opera takes you through all the main features of CSS3 that have good support across modern browsers, and some that are a little more experimental.
HTML5 presented at the Fox Valley Computing Professionals on December 14, 2010. Explores the history, philosophy, and drama behind this popular new spec for the web, and looks at some of the key new features.
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
As more browsers deliver rich support for the next generation of standards-based web development, new techniques are enabling web developers to design with unprecedented levels of control. In this session, you’ll learn practical HTML5 and CSS3 techniques that you can use in any web project today. Learn how to easily add drop shadows to HTML objects, how to quickly create rounded corners, how to use custom fonts, and even how to animate with CSS. All techniques will be demonstrated with special attention to cross-browser support and tips for supporting older browsers.
Color creates a massive impact on how we tell users about our brands and products. Selecting the colors that reflect that is tough, but also making sure they are working is also essential.
After reviewing the foundations of color theory, how colors can harmonize, color schemes that reflect themes or ideas, Christopher explores the problems with working on digital color.
By examining how sites popular brands use color, we will discuss how colors fail their intended goals as well as for people with low or problematic vision. We will review rules and guidelines that help ensure our colors are visible and provide the proper intent to our customers.
Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Welocme to ViralQR, your best QR code generator.ViralQR
Welcome to ViralQR, your best QR code generator available on the market!
At ViralQR, we design static and dynamic QR codes. Our mission is to make business operations easier and customer engagement more powerful through the use of QR technology. Be it a small-scale business or a huge enterprise, our easy-to-use platform provides multiple choices that can be tailored according to your company's branding and marketing strategies.
Our Vision
We are here to make the process of creating QR codes easy and smooth, thus enhancing customer interaction and making business more fluid. We very strongly believe in the ability of QR codes to change the world for businesses in their interaction with customers and are set on making that technology accessible and usable far and wide.
Our Achievements
Ever since its inception, we have successfully served many clients by offering QR codes in their marketing, service delivery, and collection of feedback across various industries. Our platform has been recognized for its ease of use and amazing features, which helped a business to make QR codes.
Our Services
At ViralQR, here is a comprehensive suite of services that caters to your very needs:
Static QR Codes: Create free static QR codes. These QR codes are able to store significant information such as URLs, vCards, plain text, emails and SMS, Wi-Fi credentials, and Bitcoin addresses.
Dynamic QR codes: These also have all the advanced features but are subscription-based. They can directly link to PDF files, images, micro-landing pages, social accounts, review forms, business pages, and applications. In addition, they can be branded with CTAs, frames, patterns, colors, and logos to enhance your branding.
Pricing and Packages
Additionally, there is a 14-day free offer to ViralQR, which is an exceptional opportunity for new users to take a feel of this platform. One can easily subscribe from there and experience the full dynamic of using QR codes. The subscription plans are not only meant for business; they are priced very flexibly so that literally every business could afford to benefit from our service.
Why choose us?
ViralQR will provide services for marketing, advertising, catering, retail, and the like. The QR codes can be posted on fliers, packaging, merchandise, and banners, as well as to substitute for cash and cards in a restaurant or coffee shop. With QR codes integrated into your business, improve customer engagement and streamline operations.
Comprehensive Analytics
Subscribers of ViralQR receive detailed analytics and tracking tools in light of having a view of the core values of QR code performance. Our analytics dashboard shows aggregate views and unique views, as well as detailed information about each impression, including time, device, browser, and estimated location by city and country.
So, thank you for choosing ViralQR; we have an offer of nothing but the best in terms of QR code services to meet business diversity!
2. TODAY’S AGENDA
• What is CSS3?
• Explore new CSS3 selectors, properties
• (and some other things, too)
• How to make them cross-browser, when possible
• Tinker with CSS3 examples on our own
• Lookat resources to help include CSS3 into your
designs 2
5. WHERE IS
CSS3 COMING?
• The
specification is divided into different chunks,
modules
• http://www.w3.org/Style/CSS/current-work
• Transformations
• Animations
• Media Queries
• and so on, and so on...
• at a glacial pace ever towards yesterday
5
6. WHERE IS
CSS3 COMING?
• The
specification is divided into different chunks,
modules
• http://www.w3.org/Style/CSS/current-work
• The specification is being written by W3C
• http://www.w3.org/Style/CSS/
6
7. WHERE IS
CSS3 COMING?
• The
specification is divided into different chunks,
modules
• http://www.w3.org/Style/CSS/current-work
• The specification is being written by W3C
• http://www.w3.org/Style/CSS/
• Browser vendors (like Firefox, Safari, and Opera)
are implementing their own versions of these
unfinished standards
7
17. OPACITY IN IE
• First
step is to convert the RGB value of the color
to hexadecimal. In this example, rgb(255,255,0)
converts to #FFFF00.
• Next,
convert the alpha transparency value to
hexadecimal string . In this example, the value is
66.
• E.g.,
alpha value of .3 equals 4D in hexadecimal
values
• Then assemble the hexadecimal value for
transparency and the color together in one string,
starting with the transparency: #66FFFF00.
17
21. LESSONS LEARNED
• Supported in Firefox 1.5+, Opera 9+, Safari 1.2+ and Chrome.
• IE5.5+ requires the use of its own alpha filter in order for the
effect to be cross-browser.
•A drawback to using the opacity filter is that the value is inherited:
• If a parent element is set to be 10% transparent, the child
elements’ transparency is also going to be 10%.
• Watch out for legibility issues within the Web page.
21
24. PNEUMONOULTRAMICROSCOPICSILICOVOLCANOCONIOSIS
The longest word in the Oxford English
dictionary is used to name a lung disease
caused by the inhalation of very fine silica
dust, causing inflammation in the lungs.
24
38. LESSONS LEARNED
• Proprietary CSS extensions in Firefox and Safari.
• JavaScriptsolution through a jQuery plugin:
http://welcome.totheinter.net/2008/07/22/multi-column-layout-
with-css-and-jquery/
38
44. LESSONS LEARNED
• Getting @font-face to work is a little tough.
• Use http://fontsquirrel.com for pre-made kits, @font-face
generator
• Chrome supports @font-face
• Don’t feel like bothering with all that hassle?
• Use font services like typekit.com for 100s of licensed fonts.
• Use commercially free fonts (see http://fontsquirrel.com)
44
45. LESSONS LEARNED
• Font files are LARGE
• gzip them, if you use them:
http://articles.sitepoint.com/article/web-site-optimization-steps/2
• New font file format: WOFF:
http://hacks.mozilla.org/2009/10/woff/
• Font files are already compressed and supports meta information telling
where the font came from. (Vendors happy.)
• It’s supported FF3.6+, IE9+
45
55. SOLAR TEXT-SHADOW
body {
background-color: #dcaa96; /* not white */
background-image: url(tile.jpg);
}
h1 {
color: white;
text-shadow: black 0px 0px 6px;
}
55
62. BORDER-IMAGE
<div id="section">
<h2>Images on Borders</h2>
<p>Epsum factorial non deposit quid pro quo hic escorol.
Olypian quarrels et
gorilla congolium sic ad nauseum. Souvlaki ignitus
carborundum
e pluribus unum..</p>
</div><!-- /#section -->
62
72. LESSONS LEARNED
• Works in FF 3.1+ and Safari 4+.
• Image is scaled, if text is also scaled.
• Other values besides “stretch” are “repeat” (tiles the image);
“round”, which tiles and filled it with whole images; and “space”,
which is like “round” except it leaves empty space
72
77. LESSONS LEARNED
• Radius is half the distance of the diameter. (Stay in school, kids!)
• Radius border can be applied to one, two, three or all corners.
• The higher the value for the radius, the more rounded the corner
will be.
• If
borders on an inline image (IMG element) are rather large,
borders are shown behind the image (see previous screenshot).
• Workaround is to either keep border-radius value small or place
image in background.
77
83. LESSONS LEARNED
• When creating a mask, every part of the image that is transparent
becomes the mask or the part that hides a portion of the
background image.
• Approach is somewhat hard to understand, since typically, alpha
transparency is, well, transparent.
• Themasks scale to the complete width of image, including
borders.
• The background shows through, including background images.
• Might work best with areas of flat color behind the images
83
90. SAFARI GRADIENTS
background-image:
-webkit-gradient(radial,center center,900,center
bottom,0,from(#0cf ),to(white));
Set the starting and stopping colors.
90
91. LESSONS LEARNED
• Gradients in Safari can be applied to not just background images
of block-level elements, but also:
• list bullets, generated content, and border-images!
• Unit values aren’t accepted (px, em, etc.) It’s assumed to be pixels.
• Don’t use background-position shorthand values.
• Use a background-image with a gradient for “older” browsers.
91
92. FIREFOX GRADIENTS
• Whereas Safari sets the type of gradient within its own
proprietary property, Firefox has properties for both types of
gradients: -moz-radial-gradient() and -moz-radiallinear().
• Unlikethe Safari gradient, you can use background-position
shorthand values and unit values when setting the starting and
stopping points of gradients.
• Firefox’s implementation of CSS gradients concerns transparency.
92
105. LESSONS LEARNED
• The transitioning-timing-function function states
the type of animation the effect is going to take.
• In
this example, the value is set to linear, which
means each frame of the animation length takes
the same amount of time.
• Other values for transitioning-timing-function
include ease, ease-in, ease-out, and cubic-bezier
(x1, y1, x2, y2).
105
107. CUBIC BEZIER CURVE
cubic-bezier(x1, y1, x2, y2)
• Thefirst two values of cubic-bezier represent the
transition on a curve, as shown in the figure.
• Values for y1 and y2 represent the start and end
of the transition and are always equal to the
values of 0.0 and 1.0, respectively.
• The speed with which the transition takes hold is
represented by the values x1 and x2. The greater
the value for x1 and x2, the slower the transition
occurs.
107
108. CUBIC BEZIER CURVE
cubic-bezier(x1, y1, x2, y2)
•A value of ease-in starts the transition at a slow
speed and then speeds up. This value is
equivalent to cubic-bezier(0.42, 0, 1.0, 1).
• Theease-out value starts the transition at a fast
speed and then slows down. This value is
equivalent to cubic-bezier(0.42, 0, 1.0, 1).
• The ease value is equivalent to cubic-bezier(0.25,
0.1, 0.25, 1.0).
108
109. DURATION & DELAY
• The transition-duration property’s default value is
0.
• Any negative value is treated as though it’s zero.
• Units the value may take include, but are not
limited to, “s” for seconds and “ms” for
milliseconds.
• Thetransition-delay property sets the amount of
time before a transition starts.
109
110. TRANSITION PROPERTY
• The transition-property property defines which CSS
visual property the transition is applied to.
• In
the animated link example, the transition is
applied to the background color.
110
111. SHORTHAND PROPERTY
• You can write the properties of the transition
effect in one value for the transition property:
#navsite a {
-webkit-transition: background-color .66s linear;
}
111
115. COMPLEX ANIMATED LINKS
• Web designer Faruk Ateş’s personal site (see http://farukat.es/)
uses the transition property to change the color of the element.
• As well as the color, width, box shadow, text shadow, and
opacity.
115
123. ANIMATING ELEMENTS
• Animations can take on more than one property (think
offset properties and even opacity for some interesting
effects).
• The animation-transform property is used to associate
which keyframe rule is used (“clouds).
• The animation-duration is set for how long the effect should
occur. (Negative values are treated as zero.)
• The animation-iteration-count tells how many times it
should happen. For constant looping, use value of “infinite”.
• Use animation-direction property set to normal loops
animation, while “alternate” creates a more seamless
presentation (back and forth).
123