What I'm trying to achieve is a green rectangle on the red rectangle, but the green rectangle should start at a lower point, not according to the height of the DIV and end before the red one.
Illustration:
#div_1{
width: 200px;
min-height: 35px;
background:linear-gradient(to top, red 10%, transparent 10%), linear-gradient(90deg, blue 0% 10%,
red 10% 15%,green 15% 80%,red 80% 85%
,blue 85% 100%);
}
<div id ="div_1"></div>
#div_1{
width: 400px;
height: 100px;
background:linear-gradient(to left, blue 15%, transparent 10%),linear-gradient(to right, blue 10%, transparent 10%), linear-gradient(to top, red 15%, transparent 10%),linear-gradient(to bottom, red 15%, transparent 10%), linear-gradient(90deg,blue 0% 10%,red 10% 15%,green 15% 80%,red 80% 85%
,blue 85% 100%);
}
<div id ="div_1"></div>
Related
I am trying to create two divs (one on top half of page and the other on the bottom half) that look like teeth. The idea is that the top and bottom mouth piece divs will open and close with the scroll of the mouse and reveal the website content. Any idea how to make the each div look like a set of teeth? Would it be easier to just use an image of the teeth and do it like that?
You can add clip-path to two divs for the purpose
Code example
.jaw {
height: 100%;
width: 100%;
position: fixed;
background: white;
}
.bottom {
bottom: 0;
}
.top {
clip-path: polygon(
0% 0%,
0% 80%,
20% 20%,
33% 80%,
50% 20%,
66% 80%,
80% 20%,
100% 80%,
100% 0
);
}
.bottom {
clip-path: polygon(
0% 100%,
0% 80%,
20% 20%,
33% 80%,
50% 20%,
66% 80%,
80% 20%,
100% 80%,
100% 100%
);
}
I want to resize a soccer pitch that I've drawn in CSS. Basically, the idea is to make the pitch responsive and become a reusable component for web/native development (I will be using React).
Here's my code snippet so far- I'm struggling to figure out how to maximise the CSS width so that it takes up most of the available space, whilst still keeping the same dimensions/scale of a soccer pitch (on multiple devices). How should I adjust my width and height fields?
html {
--green: #4c7;
--light: #5d8;
background: var(--green);
}
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vmin;
height: 60vmin;
border: 0.5vmin solid white;
background-image:
radial-gradient(circle at 0% 0%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 100% 0%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 0% 100%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 100% 100%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 50% 50%, white 1%, transparent 0),
radial-gradient(circle at 50% 50%, transparent 14%, white 0 14.75%, transparent 0),
linear-gradient(to right, transparent 49.75%, white 0 50.25%, transparent 0),
repeating-linear-gradient(to right, var(--green) 0 10%, var(--light) 0 20%);
}
You can use the CSS media query aspect-ratio.
Depending on whether the viewport has aspect ratio greater than or less than 9/6 you can set the height of the pitch to the maximum (100vh) and the width as 9/6*100vh and vice versa.
This snippet actually uses 95vh/vw to give you a bit of room round the edge so you can see it's working. Also it defines a class 'pitch' and uses a div as the pitch element rather than body - though of course you are free to use body in the way you have it might be rather constricting if, say, you want to put things round the edge of the pitch.
html {
--green: #4c7;
--light: #5d8;
background: var(--green);
}
.pitch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95vw;
height: calc((6 / 9) * 95vw);
border: 0.5vmin solid white;
background-image: radial-gradient(circle at 0% 0%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 100% 0%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 0% 100%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 100% 100%, transparent 1%, white 0 1.5%, transparent 0), radial-gradient(circle at 50% 50%, white 1%, transparent 0), radial-gradient(circle at 50% 50%, transparent 14%, white 0 14.75%, transparent 0), linear-gradient(to right, transparent 49.75%, white 0 50.25%, transparent 0), repeating-linear-gradient(to right, var(--green) 0 10%, var(--light) 0 20%);
}
#media (min-aspect-ratio: 9/6) {
/* this means that we have to fit the height to 100vh and the width must adjust accordingly */
.pitch {
padding-bottom: 0;
height: 95vh;
width: calc((9 / 6) * 95vh);
}
}
<div class="pitch"></div>
I am developing a site for my client and he asked me to have the same below site kind a effect for his website
http://www.big.dk/
here you can see text is filling up and after it finish filling all the letters, homepage loads up. any idea how can I copy the same kind a effect or any code you can share. I try to rip the code but I think the site is using swf file not jquery as I couldn't rip it successfully.
To achieve the effect mentioned, I followed the following approach.
Create an image with required text on it (StackOverflow for example).
Make the text on this image transparent. (I did it in Microsoft Powerpoint).
This is how the image looks
Note that the text area is transparent. Download this image and open it in any image viewer to verify.
Then, Create a gradient. (You can use this for simplicity)
Combining the above resources, here is the fiddle.
#color {
position: absolute;
width: 800px;
height: 130px;
background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF));
/* safari4+,chrome */
background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ie10+ */
background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* w3c */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1);
/* ie6-9 */
}
#text {
position: absolute;
width: 800px;
height: 130px;
background: url('http://i.stack.imgur.com/plKV4.png');
background-size: 100% 100%;
}
#slider {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: gray;
animation: slide forwards 5s linear;
}
#keyframes slide {
0% {
left: 0%;
}
100% {
left: 100%;
}
}
<div id="color">
<div id="slider"></div>
<div id="text"></div>
</div>
I have used keyframes animation to fill the color.
It can be easily replaced by jQuery
I need to build a very simple doughnut chart ( 2 values, no animations, pure css)
didn't found anything simple in google ( everything is using animation or many values)
Please help me :)
Demo
CSS
.value {
height:100%;
width:100%;
border-radius:100%;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 5px rgba(0, 0, 0, 0.1) inset;
position:absolute;
background: -moz-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3498db), color-stop(50%, #3498db), color-stop(50%, #FFFFFF), color-stop(100%, #FFFFFF));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Opera11.10+ */
background: -ms-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* IE10+ */
background: linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* W3C */
}
The trick which makes it work is also it's limitation.... Using linear-gradient from 0% to 50% it shows #3498db color and then from 50% to 100% it shows #FFFFFF color... To set this dynamically with a perfect look will be a lot difficult...
Hope it helps..!!
I'm not sure if you can make one using pure CSS, but check out highcharts. Theirs is pretty simple, and you can do it with only two values (don't be intimidated by the example).
I have a column that is aligned on the right hand side of the page. The column must span the entire height of the page, thus my reasoning behind making it fixed. There will be items within the column that should not be fixed. No matter what I play with the items continue the scroll with the page.
Does anyone have a way to either make the child div static within the parent that is fixed, or a way to make a column span the entire height of the page without using a fixed positioning?
Here is the CSS:
.rightCol{
width: 28px;
position: fixed;
bottom: 0px;
top: 0px;
z-index: -1;
margin-left: 969px;
}
.rightColItem{
margin-top: 95px;
margin-left: 10px;
position: absolute;
}
And the HTML:
<div class="rightCol">
<div class="rightColItem">
I want this to be static and not fixed
</div>
</div>
And here is a link to a fiddle -->
http://jsfiddle.net/7hmKy/
Any help is greatly appreciated!
Edit 1: The right aligned bar is inside a container div of 1000px.
An easier method—with less markup too—is to use CSS3 gradients for the background of your page. You can also easily use an image fallback to support old browsers:
body {
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
background: linear-gradient(right, #fa8072 200px, transparent 200px);
}
.sidebar {
width: 200px;
float: right;
}
Demo (I used Sass and Compass because they make CSS3 gradients much easier to keep updated.)
EDIT:
Based on your comment, I've created a new example using a centered body that is 1000px wide (with some finagling you could use a div) and changed the gradients to replicate a border:
body {
height: 100%;
min-height: 2000px;
width: 1000px;
margin: 0 auto;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}
Demo