CSS 3 is the most recent iteration of Cascading Style Sheets. It is divided into modules and supports new selectors, properties for animation, transitions, transforms, and flexible box layout. Many CSS 3 features are already supported in modern browsers even though CSS 3 has not been fully approved as a specification.
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
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!
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
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!
Dynamic languages, for software craftmanship groupReuven Lerner
Reuven Lerner's talk about dynamic programming languages in general, and about Ruby in particular. Why would you want to use a dynamic language? What can you do with one that isn't possible (or easy) with a static language?
Dynamic languages, for software craftmanship groupReuven Lerner
Reuven Lerner's talk about dynamic programming languages in general, and about Ruby in particular. Why would you want to use a dynamic language? What can you do with one that isn't possible (or easy) with a static language?
HTML5: The Future of Web Development with IE9, IE10 and Windows 8Shaymaa
HTML5 is with us now and Windows 8 will be putting HTML 5 front and centre, literally. IE9 and 10 allow you to make use of a lot of the best bits from HTML5 and CSS 3 today. This session will take you through some of the new Web API's and techniques made available as part of IE9/10's support for HTML5.
CSS is becoming more and more powerful and nowadays it allows a lot of possibilities. This talk compiles examples of more advanced tips and techniques to add to your CSS skills. Have you ever wanted to curve text around a floated image? Or maybe style broken images? How about using attribute selectors more effectively? Then this talk is for you.
See here for the example files: https://drive.google.com/open?id=1fumPPwRo1wvCKwOw5qQgVrenJnnchFJ5
DV10 HTML5: The Future of Web Development Ronald Widha
This session took the audience through some of the context of how HTML5 came about, the common misconceptions, new elements, Web API's and techniques made available in the new standard. It also touched on how to utilize HTML5 in the real world through showcasing Responsive Design Website using CSS3 media query & Polyfills and HTML5 Windows 8 Application.
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.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
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
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
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
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
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.
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.
4. What is CSS 3?
Cascading Style Sheets level 3 is the most
recent iteration of CSS
It is divided into several separate
documents called "modules"
CSS 3 has not been approved as a
specification, but there are already a lot of
properties that are supported in various
browsers.
The earliest CSS 3 drafts were published in
June 1999
4
6. Attribute Selectors
E[foo^="bar"]
An E element whose "foo" attribute value
begins exactly with the string "bar"
Example: a[src^="https://"]
E[foo$="bar"]
An E element whose "foo" attribute value ends
exactly with the string "bar"
E[foo*="bar"]
An E element whose "foo" attribute value
contains the substring "bar"
6
8. Structural Pseudo-classes
:root
The root of the document
E:nth-child(n)
An E element, the n-th child of its parent
E:nth-last-child(n)
An E element, the n-th child of its parent,
counting from the last on
E:nth-of-type(n)
An E element, the n-th sibling of its type
8
9. Structural Pseudo-classes (2)
E:nth-last-of-type(n)
An E element, the n-th sibling of its type,
counting from the last one
E:last-child
An E element, last child of its parent
E:first-of-type
An E element, first sibling of its type
E:last-of-type
An E element, last sibling of its type
9
10. Structural Pseudo-classes (3)
E:only-child
An E element, only child of its parent
E:only-of-type
An E element, only sibling of its type
E:empty
An E element that has no children (including
text nodes)
More detailed descriptions:
http://www.w3.org/TR/css3-selectors/#structural-pseudos
10
12. The UI Element States
Pseudo-classes
E:enabled
A user interface element E which is enabled
E:disabled
A user interface element E which is disabled
E:checked
A user interface element E which is checked (for
instance a radio-button or checkbox)
Currently supported only in Opera!
12
14. Other CSS 3 Selectors
E:target
An E element being the target of the referring
URI
E:not(s)
An E element that does not match simple
selector
E ~ F
An F element preceded by an E element
14
17. Font Embeds
Use @font-face to declare font
Point to font file on server
Call font with font-family
Currently not supported in IE
Use font embedding instead of images
@font-face {
font-family: SketchRockwell;
src: url('SketchRockwell-Bold.ttf');
}
.my_CSS3_class {
font-family: SketchRockwell;
font-size: 3.2em; 17
}
18. Text Shadow
Applies shadow to text
Syntax: text-shadow: <horizontal-
distance> <vertical-distance>
<blur-radius> <shadow-color>;
Do not alter the size of a box
text-shadow: 2px 2px 7px #000000;
18
19. Text Overflow
Specifies what should happen when text
overflows the containing element
Syntax: text-overflow: <value>;
Possible values:
ellipsis - Display ellipses to represent clipped
text
clip - Default value, clips text
Currently not supported in Firefox and IE
19
20. Word Wrapping
Allows long words to be able to be broken and
wrap onto the next line
Syntax: word-wrap: <value>;
Possible values:
normal
break-word
Supported in all major browsers
20
23. Opacity
Sets the opacity level for an element
Syntax: opacity: <value>;
Value from 0.0 (fully transparent) to 1.0
The opacity is supported in all major browsers.
Note: IE8 and earlier supports an alternative,
the filter property: filter: Alpha(opacity=50).
Example:
<img src="img.jpg" style= "
opacity: 0.4;
filter: alpha(opacity=40)" />
23
24. RGBA Colors
Standard RGB colors with an opacity value for
the color (alpha channel)
Syntax:
rgba(<red>, <green>,
<blue>, <alpha>)
The range for red, green and blue is between
integers 0 and 255
The range for the alpha channel is between 0.0
and 1.0
Example: rgba(255, 0, 0, 0.5)
24
25. HSL Colors
Hue is a degree on the color wheel
0 (or 360) is red, 120 is green, 240 is blue
Saturation is a percentage value
100% is the full color
Lightness is also a percentage
0% is dark (black)
100% is light (white)
50% is the average
25
26. HSLA Colors
HSLA allows a fourth value, which sets the
Opacity (via the Alpha channel) of the element.
As RGBA is to RGB, HSLA is to HSL
Supported in IE9+, Firefox 3+, Chrome, Safari,
and in Opera 10+
Example:
hsla(0, 100%, 50%, 0.5)
Result:
26
29. Gradient Backgrounds
Gradients are smooth transitions between two
or more specified colors
Use of CSS gradients can replace images and
reduce download time
Create a more flexible layout, and look better
while zooming
Supported in all major browsers via different
keywords
This is still an experimental feature
29
31. Multiple Backgrounds
CSS3 allows multiple background images
Simple comma-separated list of images
Supported in Firefox (3.6+), Chrome (1.0/1.3+),
Opera (10.5+) and Internet Explorer (9.0+)
Comma separated list for the other properties
background-image: url(sheep.png), url(grass.png);
31
39. CSS3 box-sizing
Determine whether you want an element to
render it's borders and padding within its
specified width, or outside of it.
Possible values:
box-sizing: content-box (default)
box width: 288 pixels + 10 pixels padding and 1
pixel border on each side = 300 pixels
box-sizing: border-box
box width: 300 pixels, including padding and
borders
39
40. CSS3 box-sizing (Example)
Example: Box with total width of 300 px
(including paddings and borders)
width: 300px;
border: 1px solid black;
padding: 5px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Opera 9.5+, Google Chrome */
box-sizing: border-box;
40
41. CSS 3 Flexible Box Model
The flexible box model determines the way
boxes are distributed inside other boxes and
the way they share the available space.
New values for "display" property:
flexbox
inline-flexbox
This box model is still under development
Still not supported in major browsers
41
42. CSS 3 Box Model Properties
flex-direction
Specifies how flexbox items are placed
flex-order
May be used to change the ordering of the
elements. Elements are sorted by this value.
flex-pack
Defines the flexibility of packing spaces
flex-align
Changes the way free space is allocated
42
43. CSS 3 flex-direction
The flex-direction property specifies how
flexbox items are placed in the flexbox.
Possible values:
lr – Displays elements from left to right
rl – Displays elements from right to left
tb – Displays elements from top to bottom
bt – Displays elements from bottom to top
inline and inline-reverse
block and block-reverse
43
47. Transitions
Add an effect when changing from one style to
another
Different timing functions:
ease, ease-in, ease-out, ease-in-out, linear
Example:
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
47
48. 2D Transformations
2D transforms are widely supported
Skew – skew element
transform: skew(35deg);
Scale – scale element
transform: scale(1,0.5);
Rotate – rotates element
transform: rotate(45deg);
Translate – moves element
transform: translate(10px, 20px);
48
49. 3D Transformations
3D transforms are similar to 2D transforms
Only work in Safari and Chrome
X, Y and Z transformation
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
perspective: 800;
perspective-origin: 50% 100px;
translate3d, scale3d
49
52. Exercises
1. Using your knowledge of CSS 3 style, the given
HTML code and approximate the end result (shown
in the image below:
<div id="example_form">
<h1>Example form</h1>
Your name:
<input value="Mark DuBois"/>
Your email:
<input value="Mark@...." />
<input value="Subscribe"
type="submit" />
</div>
52
53. Exercises (2)
1. Using CSS3 make a rotating 3D
Rubik Cube.
2. Using CSS3 make a text that is
pulsing, i.e. gets bigger, then smaller, etc. while
blinking with different colors.
3. Using CSS3 make a text bouncing around the screen
(the browser).
Hint: the text should change its position
53
54. Exercises (3)
1. Using CSS3 make a landscape with a lake/sea with ships
moving in it.
54