I have a simple div element with red background and text on it. I wish this element will have a rotation and a skew. What happens as a result of my code is that the text is rotated, not the whole div element. How can I solve this?
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title></title>
<style>
#CssElement {
position:absolute;
top:250px;
left:250px;
width:200px;
height:200px;
background-color:red;
-webkit-transform:skew(-15deg,-30deg) rotate(180deg);
font-size:40px;
}
</style>
</head>
<body>
<div id="CssElement">Look how I am drawn</div>
</body>
</html>
This is how the element renders on screen:
If you don't want the text to be affected, add another element and apply inverse of the transform:
fiddle
<div id="CssElement"><span>Look how I am drawn</span></div>
CSS:
#CssElement span {
display: inline-block;
-webkit-transform: rotate(180deg) skew(15deg, 30deg);
transform: rotate(180deg) skew(15deg, 30deg);
}
Related
This question already has answers here:
How to create a ::before for multiple #id
(1 answer)
Shorten verbose CSS that repeats combinations of elements and pseudo-classes
(1 answer)
Closed 1 year ago.
#MainPage-OpenMenu:hover path:nth-child(1) {
fill: #49ffad;
transition: 1s;
}
#MainPage-OpenMenu:hover path:nth-child(2) {
fill: #49ffad;
transition: 1s;
}
As you can see my code is repeated. How can I make it shorter to avoid duplicate code ?
You can use :is():
#MainPage-OpenMenu:hover path:is(:nth-child(1), :nth-child(2)) {
fill: #49ffad;
transition: 1s;
}
https://www.w3.org/TR/selectors-4/#matches
Use a comma in between selectors to apply the same css to multiple selectors. For example,
#MainPage-OpenMenu:hover path:nth-child(1), #MainPage-OpenMenu:hover path:nth-child(2) {
fill: #49ffad;
transition: 1s;
}
See snippet for a similar example.
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
#div1, #div2 {
background-color: red;
}
<div id="div1"></div>
<div id="div2"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.tempdiv:hover > div > :nth-child(1) {
color: red;
}
.maindiv:hover > div > :nth-child(1),
.maindiv:hover > div > :nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div class="tempdiv">
<h3>However on div and change color of first child</h3>
<div>
<h1>Mango</h1>
<h1>Orange!</h1>
</div>
</div>
<div class="maindiv">
<h3>However on div and change color of first and second child</h3>
<div>
<h1>Mango</h1>
<h1>Orange!</h1>
</div>
</div>
</body>
</html>
Simple and straight forward example to clear everything you are looking for. I hope this will answer the question
You can add more with " , " check this page for more info. https://www.w3schools.com/css/css_selectors.asp
#MainPage-OpenMenu:hover path:nth-child(1),
#MainPage-OpenMenu:hover path:nth-child(2) {
fill: #49ffad;
transition: 1s;
}
I have the following code that has an animation of five images, I want there to be a fade in when one picture changes into another. As it is now it is just an abrupt one image after the other, Is there some way to make a gradual fade in?
#MTG
{
width:225px;
height:300px;
border:solid black 2px;
position:fixed;
animation-name:MTG;
animation-duration:15s;
animation-delay:10s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
transition-duration:5s;
}
#keyframes MTG
{
0%
{
background-image: url(http://lorempixel.com/225/300/nature/1/)
}
25%
{
background-image:url(http://lorempixel.com/225/300/nature/2/)
}
50%
{
background-image:url(http://lorempixel.com/225/300/nature/3/)
}
75%
{
background-image:url(http://lorempixel.com/225/300/nature/4/)
}
100%
{
background-image:url(http://lorempixel.com/225/300/nature/5/)
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MTG Animation</title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<h1>MTG Card animation.</h1>
<div id="MTG">
</div>
</body>
</html>
I think playing around with the percentages will help you.
#MTG
{
width:225px;
height:300px;
border:solid black 2px;
position:fixed;
animation-name:MTG;
animation-duration:15s;
/*animation-delay:10s;*/
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:normal;
/* transition-duration:5s;*/
}
#keyframes MTG
{
0%, 15%
{
background-image:url(http://lorempixel.com/225/300/nature/1/)
}
20%, 35%
{
background-image:url(http://lorempixel.com/225/300/nature/2/)
}
40%, 55%
{
background-image:url(http://lorempixel.com/225/300/nature/3/)
}
60%, 75%
{
background-image:url(http://lorempixel.com/225/300/nature/4/)
}
80%, 95%{
background-image:url(http://lorempixel.com/225/300/nature/5/)
}
100%{
background-image:url(http://lorempixel.com/225/300/nature/1/)
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MTG Animation</title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<h1>MTG Card animation.</h1>
<div id="MTG">
</div>
</body>
</html>
I'm attempting to build an app with Ionic framework and Angular, but everything I try to make a smooth rotation animation on a div element isn't working properly. I need it to happen every time I click a button. The div element is separate from the button. I would like it to rotate 360 degrees and be repeatable.
I don't really have any code for you guys because I don't know how to do this! Any help would really be appreciated.
ng-click combined with CSS3 transform:rotate() from 0-360 degrees is one approach. Here is a working example:
http://play.ionic.io/app/7ab32156c805
css
#box {
margin: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Spin Click Demo</h1>
</ion-header-bar>
<ion-content class="padding">
<div id="box" ng-class="divClass"></div>
<button class="button button-assertive" ng-click="divClass='spin'">Spin</button>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic']);
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533
I want IE8, FF's effect:
My code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV width 100% opera without scrollbar</title>
<style type="text/css">
<!--
html,* {margin:0px; padding:0px; }
html,body {width:100%; height:100%; overflow:hidden;}
-->
</style>
</head>
<body>
<div style="position:relative; height:100%; width:100%; background:#dee; overflow:auto;">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100px; background:#e46;"></div>
<div style="position:absolute; top:0px; left:0px; height:100px; width:2000px; background:#98a;"></div>
</div>
</body>
</html>
You need to learn how to use CSS Level 1. Positioning is not necessary for this type of layout.
I've created a tutorial to visually demonstrate how CSS works with the float and margin properties here...
http://www.jabcreations.com/web/css/nested-divisible-elements
Keep in mind if you want to create a padding effect you will save yourself a TON of pain by instead adding margin to a child element like so...
/* Bad */
div.class1 {padding: 4px;}
/* Good */
div.class1 > div {margin: 4px;}
Note that the > operator limits the selector to first generation division elements in my example. So if you have a third generation division element the margin would not be applied. It's highly compatible and you should only consider compatibility for IE 8.0+ at this point.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV width 100% opera without scrollbar</title>
<style type="text/css">
body, html {border: 0px; margin: 0px; padding: 0px;}
#content
{
background-color: #dee;
}
#head
{
background-color: #98a;
height: 100px;
}
#side
{
background-color: #e46;
float: left;
width: 10%;
}
</style>
</head>
<body>
<div id="head">#head</div>
<div id="side">#side</div>
<div id="content">#content</div>
</body>
</html>