this is my code:
<style type='text/css'>
div {
width: 100px;
height: 100px;
text-align: center;
font-size: 22px;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.40, #ff0),
color-stop(0.5, orange),
color-stop(0.60, rgb(255, 0, 0)));
-webkit-transform: rotate(180deg)
}
</style>
<div id="test">click me to play</div>
the div rotate 180 deg , and the font is also rotate 180 deg,
but , i don't want the font rotate ,
what can i do .
thanks
unfortunately there's no existing solution yet! You either rotate the whole block (content, font and background included) or you don't rotate it.
Sorry!
You can find documentation on these two websites:
http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
http://www.sitepoint.com/css3-transform-background-image/
The later one offers a 'trick' solution that maybe could help, creating a 'fake' block containing your background.
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
(source by sitepoint)
Why rotate it at all? Just describe your gradient the other way round:
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0.40, #ff0),
color-stop(0.5, orange),
color-stop(0.60, rgb(255, 0, 0)));
Related
I would like to customize this answer from a api. I tried with css grid but cant do it. I don't know if I am adding classes well
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
.image-grid{
--gap: 16px;
--num-cols: 5;
--row-height: 500px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols),1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 150px;
}
}
I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
I have a site made of "slides" 100% height.
<div class="slide" id="one">page1</div>
<div class="slide" id="two">page2</div>
<div class="slide" id="three">page3</div>
I use waypoints to perform some animation based on the position of the scroll, and it works fine. The context used is "window" and below an example:
$('#one').waypoint(function(direction)
{
//do something
}, { offset: '75%' });
By the way, in a slide there is a button that modifies the height of an image (it becomes very big), so after the resize the height of the container changes and also the height of the "slide", too.
I need the waypoint to refresh, in order to be raised at the same percentage calculated on the new size of the slide. I tried to do
$.waypoints('refresh');
after the resize, but it seems not working.
Below a piece of my css:
html {
height: 100%;
}
body{
text-align:center;
height:100%;
margin: 0 auto;
overflow-x: hidden;
}
.slide{
height: 100%;
margin: 0 auto;
background: white;
min-height: 700px;
min-width: 1024px;
}
#home {
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
min-height: 800px;
}
Can someone help me?
I have 2 inline divs inside a parent div:
.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.
Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/
How can I make div2 have a width of 190px without setting a static width?
You could do it this way:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
You could also do it without floating the right div (this is the way I would prefer):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/
I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.