<!DOCTYPE html >
<html>
<head>
<title>Web Page Design</title>
<style>
body{
/* background-image: -webkit-linear-gradient( 316deg, rgba(153,0,51,20) 20%, rgba(51,51,102,10) 45%);
*/
background-image: url('https://images.pexels.com/photos/1083617/pexels-photo-1083617.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
background-repeat: no-repeat;
background-attachment: fixed;
}
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
background-color:yellow;
}
ol li{
color: darkorange;
}
/*
<!-- TERMINATING AND START HEAD BODY AND STYLE TAGS -->
*/
.transText{
text-transform: uppercase;
}
.rotText{
transform: rotate(-30deg);
position: relative;
top: 200px;
left: 300px;
}
li > a{
color: indigo;
text-decoration: none;
}
li > a:hover{
text-decoration: underline;
color: darkorange;
text-decoration-color: crimson;
}
input[type="text"]{
background-color: beige;
color: indigo;
box-shadow: 5px 5px 5px #000;
}
</style>
</head>
<body>
<!-- here -->
<ol>
<!--
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
-->
<li><a href="#neatResumeIdea">Resume Idea!!!!!!!!!!!!!!</a></li>
<li><h1>More on matrixs (opera)</h1><br>
<p>and at the Opera Web Developer site (https://dev.opera.com/articles/view/understanding-the-csstransforms-
matrix). While they have the advantage of being shorter and more efficient, matrix transforms are
not human-readable, so I won’t use them for the examples in this book.</p></li>
<li>
Linear Algebra transformation; however, beyond the scope of Pro CSS3. Matrix 3d corrdinates are auto-generated (click below)<br/>
<a href="www.useragentman.com/matrix/">www.useragentman.com/matrix/
</a>
</li>
<li><h2>Snippet from Pro CSS3</h2>
<p>it’s easiest to use a tool to generate the code.
The Useragentman Matrix Construction Set (www.useragentman.com/matrix/) and CSS3 Transform Matrix
Calculator (www.leeourand.com/test/transform/test/transform.html) offer two ways of doing so. An explanation
of matrix transformations can be found at The CSS Matrix Transform for the Mathematically Challenged
(www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/)</p>
</li>
<li>
<p>The transformation below is translated 50px and 4em it is also given a -1 of scaleX</p>
<img style="transform: translate(150px, 4em) scaleX(-1);" alt="" width="50" height="50" src="https://clipart-library.com/images/8cxngG46i.jpg" />
</li>
<li>
<p>Below demonstrates transformations in CSS3 scaleX and skewY scaleX has a -1 value</p>
</li>
<li>
<img alt="" style="transform: skewX(.7rad);" width="50" height="50" src="https://clipart-library.com/images/8cxngG46i.jpg" />
<img style="transform: scaleX(-1); -webkit-transform: skewY(30deg) scaleX(-1);" alt="" width="50" height="50" src="https://clipart-library.com/images/8cxngG46i.jpg" />
</li>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">This Link is MIT recomended for CSS Tricks - Flexbox</a></li>
<li>Tip <a href="https://www.caniuse.com">www.caniuse.com</a> is an excellent resource to keep track of browser support for CSS3.</li>
<li><a href="https://www.tutorialspoint.com/css/css_backgrounds.htm">CSS Backgrounds</a></li>
<style>
li.cssNotes > h1{
margin-top: 100px;
transform: rotate(-15deg);
color: crimson;
}
</style>
<li class="cssNotes">
<h1>CSS Measurement Units</h1>
<ul style="margin-top: 50px;">
<li>% ---- Defines a measurement as a percentage relative to another value, typically an enclosing elememnt. </li>
<li>cm ---- Defines a unit of measurement in centimeters</li>
<li>em ------ A relative measurementfor the hieght of a font in em spaces. Because an em unit is equivalant to the size of a given font, if you assign a font to 12 pt, each "em" unit is 12pt; thus, 12 em would be 24 pt. </li>
<li>
ex ------ This value defines a measurement relative to a a font's x-height the x height is determined byt he height of the font's lowercase letter x.
</li>
<li>in ----- defines measurement in inches.</li>
<li>mm</li>
<li>pc --------- Defines a measurement in picas. A pica is equivalant to 12 points. thus, there are 6 picas perinch.</li>
</ul>
<li>px</li>
<li><br/>
Following is the example showing you how to import a style sheet file into HTML document −
<br/>
<br/>
<head>
<br/>
<br/>
@import "myStyleSheet.css";
<br/>
<br/>
</head>
</li>
<li>
<head>
<br/>
<br/>
<@import url("URL");
<br/>
<br/>
</head>
Is another syntax: <@import "URL";
</li>
<li>
@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.
</li>
<li>
media<ol>
<li>screen</li>
<li>tty</li>
<li>tv</li>
<li>projection</li>
<li>handheld</li>
<li>print</li>
<li>braille</li>
<li>aural</li>
<li>all</li>
</ol>
Specifies the device the document will be displayed on. Default value is 'all'. This is an optional attribute.
</li>
<li>
<link type="text/css" href="..." media="..." />
</li>
<li>
<p lang="en">Hola</p>
<p lang="ia">Hello World!</p>
<p lang="ga">I cant speak irish</p>
<p lang="it">Something</p>
<p lang="jv">I program in ... </p>
<p lang="fy"></p>
<p lang="zu"></p>
</li>
<li>
<ul>
<li>
p[lang|="en"]
<br/>
-Slects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".
</li>
<li>
p[lang~="fr"] -
<br/>Selects all paragraph elemnts whose lang attribute contains the word "fr"
</li>
<li>p[lang]<br/> - Selects all para. elements with a lang attribute.</li>
<li>
p[lang="fr"]
<br/>
<br/>
Selects all para. elements whose "lang" attribute has a value of "fr".
<br/>
<br/>
</li>
</ul>
</li>
<li>
The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color applied only to the desired text fields.
</li>
<li>
<h6>Attribute Selectors</h6>
<form action="">
<input type="text" name="demo" />
</form>
<p>input[
type="text" ] {
<br/><br/>
color:#f5f5dc;
<br/><br/>
}</p>
</li>
<li>
This code demonstrates child selector:<br/>code:
li > a {<br/><br/>
text-decoration: none ;
<br/><br/>
}
</li>
<li>
<a href="">Click Here!</a>
</li>
<li>
<p class="transText rotText">This paragrapph tag uses 2 class.</p>
<span style="color: maroon;">
code:<br/>
<p class="transText rotText">
</span>
</li>
<li>
This page demonstrates simple CSS. Code in effect is -
</li>
<li>
ol li {
<br/>
<br/>
<br/>
color: darkorange;
<br/>
<br/>
<br/>
}
</li>
</ol>
<div>Hello, World!</div>
<div id="div2">Hello, CSS3!</div>
<div>
<style>
p{
overflow: visible;
width: 1000px;
height: 100px;
}
div {
overflow: hidden;
border-radius: 20px;
width: 100px;
height: 100px;
background: gray;
border: medium inset #333;
box-shadow: 10px 10px 10px rgba(0,0,153,10);
-webkit-transition: color 5s;
transition: all 500ms, transform 2000ms;
}
div:hover {
width: 500px;
height: 1000px;
transform: rotate(6.28rad);
}
</style>
<h1 id="neatResumeIdea">The transition Property</h1>
<div>
<p>Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
SQL Tutorial
PHP 5 Tutorial
PHP 7 Tutorial
jQuery Tutorial
Python Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Bootstrap Reference
SQL Reference
PHP Reference
HTML Colors
jQuery Reference
Python Reference
Angular Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Python Examples
jQuery Examples
Java Examples
XML Examples
Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.
W3Schools.com
Hover over the div element below, to see the transition effect:</p>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p></div>
</div>
</body>
</html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
