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>
Related
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>
I have to replace the cube by a sphere with the input forme but if i add a function in the javascipt the cube disappears.
What do I have to do if I want to change the cube's dimensions?
I don't know how to link the function modifie with the three numeric inputs (longueur, largeur, hauteur) because as I've said before if I add on function, the cube disappears. The functions are wrong?
See JSFiddle
function modifie(){
var longueur ,
var largeur,
var profondeur.
longueur =document.getElementById("longueur").value
largeur =document.getElementById("largeur").value
profondeur =document.getElementById ("profondeur").value
}
I would consider the new possibilities of CSS3. FIDDLE
$("div").addClass("ball")
div {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
transition: all 5s ease;
}
div.ball {
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></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 currently have a sphere shape but, I'm trying to think of a way on how to rotate it in a circle on my website this is my current code:
<style>
b.ball {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<style>
<b class="ball"></b>
The code above puts a shape on the page.
How Would I rotate this sphere so it spins around? Not around the whole page but just in it's own area, not the entire page though. I've Googled it and I have not anything that particularly addresses this question that I've seen yet.
You can use css-animations:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
to animate a transform:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
Just add in:
.ball {
animation: spin 3s linear infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
You'll need to use prefixes though, which I've included in the demo: http://jsfiddle.net/99bds/
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