A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
Have you ever built a house? Imagine buying a lot, hiring a contractor, and then he shows up with a crane, bulldozer, and some 'crete and says "I'm ready." We often do the same thing when we build websites. We know we want a website, but don't do the necessary planning to turn our ideas into reality. In wireframes for WordPress, I will discuss what wireframes are, my process for creating them, and how they fit into WordPress.
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
Have you ever built a house? Imagine buying a lot, hiring a contractor, and then he shows up with a crane, bulldozer, and some 'crete and says "I'm ready." We often do the same thing when we build websites. We know we want a website, but don't do the necessary planning to turn our ideas into reality. In wireframes for WordPress, I will discuss what wireframes are, my process for creating them, and how they fit into WordPress.
Typography in Web Design (WordCamp Toronto 2014)Jasmine Vesque
I delivered this presentation at WordCamp Toronto, November 15, 2014.
This presentation covers typography basics and best practices, type trends in web design, personalities of type, an introduction to Google Fonts and different ways to enable fonts on your WordPress website.
The ideal audience is anyone looking to better understand Typography and how it relates to web design. They don’t need to have a coding or design background, but that would be an asset.
Learning Outcomes
Understand the different types of fonts and when to use them
Recognize the various personalities and tones fonts have and how they can affect your message
Know what the current trends are in Typography and web design
Use theme options and/or plugins to modify fonts
Leverage Google Fonts and integrate them directly into your theme
Good graphic design doesn’t happen by mistake, and neither does clever font marriage. With this Ultimate Guide to Font Pairing we show you how to make your designs beautiful, with simple and effective type applications
Read more at http://blog.canva.com/the-ultimate-guide-to-font-pairing/#Q3yEZPx6iwbBkRME.99
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hon...Holger Bartel
A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons learned.
Talk by Tomas Lin on Building Killer RIAs with Flex and Grails at the Groovy ...Skills Matter
Adobe Flex is a Rich Internet Application framework that allows developers to build robust and powerful applications for the web and the desktop. In this talk, Tomas Lin discusses the major technologies and tools available within the Grails / Flex ecosystem and dive into building a simple and fun application using the Flex plugin, BlazeDS, Grails and Flash Builder 4.
Find the podcast of this talk here:
http://skillsmatter.com/podcast/java-jee/building-killer-rias-with-flex-and-grails/zx-489
Mobile Learning Summer School
http://conferences.telecom-bretagne.eu/mlearning09/
Practice of course :
software architecture for adaptive and mobile learning
An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.
The Blue Button is a way for patients to download their medical information, spearheaded by the VA. As it expands, its original, text-based implementation is a bit long in the tooth. The White House has called on designers to re-imagine the downloadable, printable, consumer-facing health record.
It's intended to be a single-file download, like the healthcare equivalent of your bank statement, for print and screen.
Our products send loads of email messages these days. We can send fewer AND increase engagement.
NOTE: These slides weren't intended as standalone artifacts. I doubt you'
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
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.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
15. structural elements
Provides new semantic vocabulary HEADER
for parts of a page previously
NAV
served by DIVs with ID and Class
attributes.
ARTICLE
IE requires some workarounds ASIDE
using JavaScript to make these
elements work. SECTION
FOOTER
structural elements Browser Support:
Sunday, July 19, 2009
16. figure
Allows for associating captions FIGURE
with embedded content, including
videos, audio, pullquotes, or
images.
CONTENT (IMG, Q, VIDEO, ETC.)
LEGEND
figure Browser Support:
Sunday, July 19, 2009
17. audio & video
Allows for associating captions <video src="test.ogg" autoplay="autoplay"
controls="controls">
with embedded content, including Your browser does not support the video
videos, audio, or images. element. This could also include object and
embed codes for legacy browsers.
</video>
Opera, Chrome, and Firefox all
support the Ogg Theora video
format natively, while Safari and
Chrome support H.264.
audio & video Browser Support:
Sunday, July 19, 2009
18. OTHER ELEMENTS
METER Contained content is a measurement, like length.
PROGRESS Contains current process toward a goal, like a percentage.
TIME Time
COMMAND Represents something a command a user may execute.
DATAGRID Represents data. Non-tabular or otherwise.
OUTPUT Displays the output of a program or process.
RUBY Allows input of rubi/ruby annotations for Asian languages.
Sunday, July 19, 2009
20. FORM CONTROLS
DATETIME Allows input of a date and a time.
DATETIME-LOCAL Allows input of a date and a time, in local time.
NUMBER Allows input of a number.
RANGE Input is verified to be within a range.
EMAIL Confirms the input to be a valid email.
URL Ensures input is a valid URL.
COLOR Provides a mechanism for the user to input an RGB color.
Sunday, July 19, 2009
22. HTML 5 doctype
<!DOCTYPE html>
The HTML 5 doctype is way
easier than any other doctype.
Evar.
Just type the parts you remember,
and you’ll probably be right.
HTML 5 doctype Browser Support:
Sunday, July 19, 2009
23. HTML5 & XHTML5
<html>
HTML 5 supports the standard
HTML syntax (formerly SGML),
but also allows for an XML-based
variant XHTML5.
Since it’s XML, XHTML should
vs.
be served as application/xml or
application/xhtml+xml. Warning: <html xmlns="http://
this means browsers freak if there’s www.w3.org/1999/xhtml">
an error.
HTML 5 doctype Browser Support:
Sunday, July 19, 2009
24. Block-Level Links
You can now wrap links around <li>
block-level elements, rather than
having to create links around <a href="page.html">
every element inside the block <img src="pic.jpg">
element. <h3>Title</h3>
<p>Text</p>
This is useful for lists of articles
that include multiple elements, </a>
callouts with a single action, etc. </li>
Block-level Links Browser Support:
Sunday, July 19, 2009
26. Drag & Drop API
Allows objects (images and links,
by default) to be dragged and then
dropped onto a target.
The target is enabled by canceling
the ‘dragover’ (for sane browsers)
or ‘dragenter’ (for IE) events for +
the drop target. Then listen for a
‘drop’ event which contains a
‘dataTransfer’ object with info.
Drag and Drop API Browser Support:
Sunday, July 19, 2009
27. getElementsByClassName
Works just like getElementsById,
but selects an array of all elements
based on a shared class name.
No more varied custom functions
to make this happen, and
performance is significantly better.
getElementsByClassName Browser Support:
Sunday, July 19, 2009
28. Cross-Document Messaging
This allows non-hostile documents
on different domains to simply MAIN DOCUMENT
communicate with each other.
The sending document can call
FOREIGN
postMessage() on the window
IFRAME
object of the receiving document,
while the receiving document listens
for a ‘message’ event.
Cross-Doc Messaging Browser Support:
Sunday, July 19, 2009
29. Simple Client Storage
The sessionStorage DOM attribute <input
stores session data for a single type="checkbox"
window, like cookies on crack. onchange="
localStorage.insurance=checked
"
The localStorage DOM attribute />
allows each site to store megabytes
of data across sessions to improve
performance.
Both methods store only strings.
Simple Client Storage Browser Support:
Sunday, July 19, 2009
30. Structured Client Storage
HTML 5’s Web Storage module tx.executeSql(
provides an SQL server within the ‘SELECT * FROM Notes’,
client, accessible using Javascript. It [],
function(tx, rs) {
uses fairly standard SQL queries for(var i = 0;
for both reading and writing. i < rs.rows.length; i++) {
renderNote(rs.rows[i]);
There’s a lot to be explained about }
the built-in SQL server, so go
check out the docs for more
information.
Structured Client Storage Browser Support:
Sunday, July 19, 2009
31. Offline Application Caching
Allow the client to refer directly to <html manifest=”/cache.manifest”>
its cache, authoritatively, for
certain resources, even if the
CACHE MANIFEST
browser is offline. index.html
help.html
Resources listed in the “network” style/default.css
section are never cached. images/logo.png
images/backgound.png
NETWORK:
server.cgi
Offline Application Caching Browser Support:
Sunday, July 19, 2009
32. Canvas
Provides an API for drawing <canvas id="canvas" width="150" height="150">
fallback content
directly in the browser window, </canvas>
using instructions that define
function draw() {
vector-based shapes and lines. var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
This allows SVG-like graphics to be
created on the fly in the browser, ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
with fallback content (like Flash?)
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
provided to legacy browsers.
ctx.fillRect (30, 30, 55, 50);
}
}
canvas Browser Support:
Sunday, July 19, 2009
35. opacity
Adjusts the opacity of the selected div { color: #f00; opacity: 1.0; }
element’s presentation on screen.
Takes values between 0.0 (fully
div { color: #f00; opacity: 0.5; }
transparent) and 1.0 (fully
opaque)
opacity Browser Support:
Sunday, July 19, 2009
36. RGBA Color
Like RGB color definitions, but div { color: rgb(0,255,0); }
allows a fourth field, defining the
alpha value of the color being
applied.
div { color: rgba(0,255,0,0.5); }
Like opacity, the alpha value is
between 0.0 (fully transparent)
and 1.0 (fully opaque).
RGBA color Browser Support:
Sunday, July 19, 2009
37. HSL/A Color
HSL color definitions accept three div { color: hsl(240,50%,50%); }
arguments: hue is a degree on a
color wheel (0-360), saturation
is a percentage, and lightness is a
div { color: hsla(240,50%,50%,0.5); }
percentage.
HSLA is like HSL color, but
allows a fourth field, defining the
alpha value of the color being
applied. See RGBA.
HSL/A color Browser Support:
Sunday, July 19, 2009
39. background-size
Defines the size at which the div { background-size: 100px 65px; }
browser should display the specified
background image. Accepts all
normal size definitions as width
div { background-size: 400px 65px; }
followed by height.
In shorthand, this appears after
background-position values.
background-size Browser Support:
Sunday, July 19, 2009
40. background-image
Allows for multiple images to be background: url(body-top.png) top left no-repeat,
url(body-bottom.png) bottom left no-repeat,
specified. The first image specified url(body-middle.png) left repeat-y;
is layered closest to the top of the
screen, and subsequent images are
layered beneath.
background-image Browser Support:
Sunday, July 19, 2009
42. border-color
Allows for multiple border colors border: 5px solid #000;
border-color: #000 transparent transparent #000;
to be specified, one pixel at a time.
The last specified color is repeated
if necessary.
This cannot be used in the border
shorthand syntax.
border-color Browser Support:
Sunday, July 19, 2009
43. border-image
Allows the border to be represented border-image: url(button.png) 0 12 0 12 stretch
stretch;
by an image, by defining which
parts of the image should be used
for the edges, and which should be
repeated in the main part of the
border-image: url(border.png) 27 27 27 27 round
element. round;
This is difficult to represent
completely, so go look it up.
border-image Browser Support:
Sunday, July 19, 2009
44. border-radius
Curves the corners of the border border-radius: 10px;
using the radius given, often in
pixels. This can be given to all
corners, or only to individual
corners as specified.
border-top-right-radius: 10px;
Firefox refers to individual corners
like “border-radius-topright”
while Safari (correctly) refers to it
as “border-top-right-radius”.
border-radius Browser Support:
Sunday, July 19, 2009
45. box-shadow
Creates a drop shadow beneath the box-shadow: 10px 10px 10px #333;
selected element.
The first argument is the horizontal
offset, the second is the vertical
offset, the third is the blur radius,
and the final argument is the color
to be used as the shadow.
box-shadow Browser Support:
Sunday, July 19, 2009
47. text-overflow
If text overflows the available text-overflow: ellipsis;
space, the text-overflow property
Lorem ipsum dolor sit amet, consectetur adipiscing
defines what happens. elit. Nam purus nunc, auctor et accumsan ut, aliquam
vel leo. Quisque dignissim tincidunt rhoncus. Duis
sed velit rutrum lorem rutrum faucibus. Nam tincidunt
eros at arcu vestibulum egestas. Donec fringilla,
The value “ellipsis” appends an turpis in auctor luctus, orci orci vestibulum lacus,
a tristique felis erat non diam. Morbi dolor massa,
ellipsis character at the overflow elementum ac iaculis quis, iaculis sed neque. Aliquam
erat volutpat. Aliquam porttitor auctor massa sit
point. amet ultrices. Maecenas quis nunc nibh, sit amet
hendrerit leo. Donec a massa eget velit consectetur
fermentum aliquet et eros. Vestibulum volutpat, est
vitae dapibus congue, nibh augue vehicula lacutus es…
text-overflow Browser Support:
Sunday, July 19, 2009
48. text-shadow
Creates a drop shadow beneath the text-shadow: 10px 10px 10px #333;
selected text.
This is sample text.
The first argument is the horizontal
offset, the second is the vertical
offset, the third is the blur radius,
and the final argument is the color
to be used as the shadow. Multiple
shadow definitions may be
separated using commas.
text-shadow Browser Support:
Sunday, July 19, 2009
49. column-width & column-gap
Breaks flowing text into multiple column-width: 200px;
column-gap: 20px;
columns, based on the width of the
Lorem ipsum dolor sit amet, consectetur quisque dignissim tincidunt rhoncus. Duis sed
container. Column width defines adipiscing elit. Nam purus nunc, auctor et
accumsan ut, aliquam vel leo. Quisque
velit rutrum lorem rutrum faucibus. Nam
tincidunt eros at arcu vestibulum egestas.
the width of each column, and dignissim tincidunt rhoncus. Duis sed velit
rutrum lorem rutrum faucibus. Nam tincidunt
eros at arcu vestibulum egestas. Donec
Donec fringilla, turpis in auctor luctus, orci
orci vestibulum lacus, a tristique felis erat non
diam. Morbi dolor massa, elementum ac
column-gap defines the gap fringilla, turpis in auctor luctus, orci orci
vestibulum lacus, a tristique felis erat non
iaculis quis, iaculis sed neque. Aliquam erat
volutpat. Aliquam porttitor auctor massa sit
diam. Morbi dolor massa, elementum ac amet ultrices. Maecenas quis nunc nibh, sit
between columns. iaculis quis, iaculis sed neque. Aliquam erat
volutpat. Aliquam porttitor auctor massa sit
amet hendrerit leo. Donec a massa eget velit
consectetur fermentum aliquet et eros.
amet ultrices. Maecenas quis nunc nibh, sit Vestibulum volutpat, est vitae dapibus
amet hendrerit leo. Donec a massa eget velit congue, nibh augue vehicula lacus, vel
consectetur fermentum aliquet et eros. semper dolor odio in libero. Curabitur vitae
Column-count can be specified in Vestibulum volutpat, est vitae dapibus
congue, nibh augue vehicula lacus, vel
sem consequat purus fermentum tincidunt.
Donec vestibulum felis ut metus ultrices a
semper dolor odio in libero. Curabitur vitae vulputate felis rhoncus eum ivolonortis
lieu of column-width. sem consequat purus fermentum tincidunt.
Donec vestibulum felis ut metus ultrices a
vulputate felis rhoncus eum ivolonortis
column-width/column-gap Browser Support:
Sunday, July 19, 2009
50. @font-face
Allows a font file to be associated @font-face {
font-family: Helvy;
with a font name for later use in src: local("Helvetica Neue Bold"),
font-family declarations. local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
IE supports only .eot Embedded }
OpenType files, while the other p.specialFont { font-family: Helvy, sans-serif; }
browsers support any TTF and
OTF font files.
column-width/column-gap Browser Support:
Sunday, July 19, 2009
52. rotate
Rotates the selected element at the
defined angle, defined in degrees.
The rotation doesn’t affect layout, transform: rotate(30deg);
and elements that are transformed
are treated similarly to
position:relative.
rotate Browser Support:
Sunday, July 19, 2009
53. scale
Scales the element in question
based on the specified unit-less
numbers given for the X and Y
axes. If only one number is given, it transform: scale(0.5,2.0);
is applied to both axes.
scale Browser Support:
Sunday, July 19, 2009
54. skew
Skews the element around the X
and Y axes by the specified angles,
in degrees. If it’s only one number,
the Y axis is assumed to be zero. transform: skew(-30deg);
scale Browser Support:
Sunday, July 19, 2009
55. translate
Moves the object along each axis by
the length specified. The unit can
be anything accepted as a length in
CSS, such as px, em, percentages, transform: translate(30px, 0);
etc.
translate Browser Support:
Sunday, July 19, 2009
56. 3D TRANSFORMATIONS
PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer.
MATRIX3D Allows creation of a 3d transformation matrix.
ROTATE3D Rotate the matched element in three dimensions.
SCALE3D Performs a three-dimensional scale operation.
TRANSLATE3D Allows the matched element to be moved along three axes.
Sunday, July 19, 2009
65. MORE RESOURCES
HTML 5 Doctor http://html5doctor.com/
HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html
ALA Article http://www.alistapart.com/articles/previewofhtml5
Bruce Lawson http://www.brucelawson.co.uk/category/
accessibility-web-standards/html5/
Your Presenters Feel free to follow up with Jackson & Jason
Sunday, July 19, 2009