Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I've checked out several options for compressing/reducing size of CSS but what I'm really searching for is something that will truly DRY your CSS. As in it will take something like this:
html, body { width: 100%; height: 100%; } div { width: 100%, height: 50%; color: blue; } p { color: blue; }
and output something like this:
html, body, div { width: 100%; } html, body { height: 100%; } div, p { color: blue; } div { height: 50%; }
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Why these two lines' width are different? They are both supposed to 1px;
The only difference is they have different left number, but why this cause the width change?
By the way, my chrome version is 84.0.4147.105 (win10), and in firefox it looks correct.
body {
margin: 0;
padding: 0
}
.demo {
width: 500px;
height: 500px;
position: relative;
background-color: yellow;
}
.line, .line2 {
left: 300px;
position: absolute;
width: 1px;
background-color: red;
height: 500px;
}
.line2 {
left: 402px;
}
<div class="demo">
<div class="line"></div>
<div class="line2"></div>
</div>
I found because I zoomed the chrome to 125% then it cause the problem
by the way, I tried zoom to 125% in Firefox and it's still shows correct.
thanks everyone.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm working on my homework which is creating a simple web page with html, css and javascript. i was practicing on animating things with css, which I've found something cool on this link which it's making something move behind the image.
Here's the thing it's moving behind Team Logo
Now I've tried to use the source page to find out how they managed to animate it, but still got no luck to understand it Since I'm still learning. is there any example base on what I've explained?
I did it based on this answer. That's why I flagged your question as duplicate. It was cool and I couldn't resist doing it.
.hi {
width: 84px;
height: 84px;
background-image: url("https://thunderpick.com/assets/img/bolt/bolt.png");
position: relative;
border: solid 1px black;
animation: playv 1s steps(21) infinite, playh 0.0476s steps(3) infinite;
}
#keyframes playv {
0% {
background-position-y: 0px;
}
100% {
background-position-y: -1764px;
}
}
#keyframes playh {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -252px;
}
}
<div style="background-color: black; width: 86px">
<div class='hi'>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a div in which, I need to display the div as shown in the image below.
Can we acheive this using css or with any script. Need help
Thanks
Use perspective and transform: rotate.
If you take a look at this link, perspective, you'll find some interesting things one can do
div {
margin-top: 40px;
perspective: 100px;
}
img {
height: 150px;
transform: rotateY(15deg);
}
<div>
<img src="http://lorempixel.com/500/200/nature/1/" alt="">
</div>
This is basic idea.
.parent {
perspective: 600px;
}
.child {
width: 100px;
margin: auto;
height: 35px;
text-align: center;
background: red;
transform: perspective(500px) rotateY(35deg);
}
<div class="parent">
<div class="child">Banners</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I am trying to create a Single-Page Scrollable website for a Local Plumbing Company. I had a thought in mind which requires an effect like the one at :
http://sidigital.co/
Can anyone suggest me any JS/Jquery Plugin for this "Water flowing through pipe" Concept?
Well this is mostly achieved using CSS3 more than a JavaScript effect. You could possible write a script that combines firing specific CSS events with a scrolled function, like the parallax effect and the effect as seen on this fiddle.
The CSS Code cuz I am not able to post the link as is:
CSS
#progressbar {
background-color: black;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
width: 50%;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
HTML
<div id="progressbar">
<div></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Following on from another SO question.
Is it possible to expand the div, left and right instead of the answers on the other SO question which only expand to the right and down...
cheers
Of course it is.
Structure
You need a parent container set to position: relative; and your actual div set to position: absolute;
This way you can modify position of your div without any worry. This should work as a starting point. You can see the child div being shifted top and left compared to the parent.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Expansion
so for the actual expansion, you would have to animate / change the left / top position together with width and height of the box.
For every 1px you shift your box left, you have to increase its width by 2px! to get an even expansion.
$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});