I want the cloud background to scale within the box. Is that possible?
Currently it looks like this: http://freecns.yanlu.de/cumulus1/
Somehow the background scales even over the limited box. I have tried several ways to figure it out but I could not find the bug. I am not sure if it is even possible to do something like this.
I used following HTML:
<div class="backgroundbox">
<div class="box_animation"></div>
<ul class="nostyle inline center">
<li class="bboxcontent left">Freecns Cumulus includes over 100 weather specific icons which are shipped as PNG, PDF, EPS and SVG. <br /></li>
<li class="bboxvideo"></li>
</ul>
</div>
and CSS:
.backgroundbox {
position: relative;
z-index: 0;
height: 295px;
width: 816px;
border-radius: 16px;
margin-top: 48px;
margin-left: auto;
margin-right: auto;
background: url('http://www.yanlu.de/files/images/CloudBG.png') no-repeat center;
padding-top: 81px;
}
.bboxcontent {
width: 295px;
font-family: HelveticaNeue-Light;
font-size: 18px;
color: #FFFFFF;
line-height: 22px;
text-shadow: 0px 1px 2px rgba(0,0,0,0.75);
margin-right: 8px;
display: table-cell;
vertical-align: middle;
}
.bboxvideo {
height: 214px;
border-radius: 4px;
border: 4px solid #FFFFFF;
color: #FFFFFF;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
margin-left: 8px;
display: table-cell;
vertical-align: middle;
}
.box_animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: url('http://www.yanlu.de/files/images/CloudBG.png');
-webkit-background-size: cover;
-webkit-transition-property: -webkit-transform;
-webkit-animation-name: scale;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
If I understand your problem, you can set overflow: hidden; for .backgroundbox and it will snap it to the size of you box
Related
I get a space between my wrapper and the top of the page. I've tried a lot of fixes, but none that works.
The background image covers the background and is aligned to the top, but the wrapper, which has another background, seems to have a margin..
body {
height: 100vh;
background: url("https://i.imgur.com/HgflTDf.jpg") 50% fixed;
background-size: cover;
}
.wrap {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
background: rgba(17, 71, 114, 0.85);
top: 0;
}
.login {
border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%;
max-width: 320px;
background: #ffffff;
position: relative;
padding-bottom: 80px;
}
input {
display: block;
padding: 15px 10px;
margin-bottom: 10px;
width: 100%;
border: 1px solid #ddd;
transition: border-width 0.2s ease;
border-radius: 2px;
}
input:focus {
outline: none;
color: #444;
border-color: 2196F3;
border-left-width: 35px;
}
.fa {
color: #fff;
font-size: 1em;
position: absolute;
margin-top: -47px;
opacity: 0;
left: 0;
transition: all 0.1s ease-in;
}
.fa:focus {
opacity: 1;
left: 30px;
transition: all 0.25s ease-out;
}
.tittel {
color: #444;
font-size: 1.2em;
font-weight: bold;
margin: 10px 0 30px 0;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.sub {
width: 100%;
height: 100%;
padding: 10px 10px;
background: #2196F3;
color: #444;
display: block;
border: none;
margin-top: 20px;
margin-bottom: 0px;
position: absolute;
left: 0;
bottom: 0;
max-height: 60px;
border: 0px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 2px 2px;
transform: rotateZ(0deg);
transition: all 0.1s ease-out;
border-bottom-width: 7px;
}
footer {
display: block;
padding-top: 50px;
text-align: center;
color: #fff;
font-weight: normal;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<div class="wrap">
<form action="" method="post" class="login needs-validation" novalidate>
<h4 class="tittel">Login</h4>
<input type="text" name="username" value="" placeholder="Username" required autofocus/>
<i class="fa fa-user"></i>
<input type="password" name="password" placeholder="Password" required>
<i class="fa fa-key"></i>
<input type="submit" class="sub" value="Login">
</form>
<footer>Company name</footer>
</div>
EDIT: The wrapper seems to be placed 30-40px below the top. The page can be scrolled down this exact length. Tried removing the padding in the .wrap, comment out the background for the body and played around in site inspector for Chrome, disabling and enabling css to see if any of it makes a difference, which it doesn't.
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0;
padding: 0;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
Credits to Jon Egeland
You have 20px padding in your wrap class, removing it will probably solve your issue -
Hope this is what you're looking for!
This works for me just fine, no padding needed:
.page-wrap {
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: left;
overflow: hidden;
margin: 0 auto;
}
I have a fixed menubar in the left side. To the right of that I got a section. That section is suppossed to fill 100% of the viewport width minus the fixed menubar width and minus the margin and padding of the section itself.
Now I am also trying to center an image inside of this section - that is the black line that you can see in the fiddle. It is suppossed to be centered in the blue area (the section).
Issue
The section is too wide which you can see, by how the image is not centered but moved a little to the right.
Note:
It should not be possible to scroll the x-axis
Code -> https://jsfiddle.net/n9yyrxfm/
html,
body {
border-sizing: border-box;
font-family: "Dosis", "Arial", "Serif";
text-decoration: none;
font-size: 20px;
margin-left: 10px;
padding: 0;
height: 100%;
width: 100%;
}
.navbar-menu {
z-index: 100;
position: fixed;
width: 15vw;
height: 100%;
color: #000;
margin-top: 4vh;
}
.navbar-menu ul {
padding-left: 0;
}
.navbar-menu ul li {
display: block;
width: 140px;
font-size: 22px;
padding: 4px 0 4px 10px;
margin-top: 20px;
}
p {
width: 250px;
}
div#content {
/*margin-left: -140px*/
margin-left: 160px;
margin-right: 160px;
height: 200px;
}
section {
width: 100%;
color: #000;
display: block;
position: absolute;
top: 35px;
background: lightblue;
transition: opacity 0.9s linear;
-webkit-transition: opacity 0.9s ease-in-out;
-moz-transition: opacity 0.9s ease-in-out;
}
section#sec-home img {
width: 250px;
display: block;
margin: 0 auto 0 auto;
border-radius: 76px 171px 87px 171px;
-moz-border-radius: 76px 171px 87px 171px;
-webkit-border-radius: 76px 171px 87px 171px;
border: 5px solid #000000;
-webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
<div id="content">
<section class="animatedFade" id="sec-home">
<img src="images/portrait1.png" alt="">
<p>asdfr <span class="navn">asdfian</span></p>
</section>
</div>
Since you are using position: fixed for the left sidebar, please use a padding of the same for the parent. So instead of the content having both margin-left and margin-right, leave the content with full width, without the margin.
html,
body {
border-sizing: border-box;
font-family: "Dosis", "Arial", "Serif";
text-decoration: none;
font-size: 20px;
margin-left: 10px;
padding: 0 0 0 15vw; /* Change this to navbar width. */
height: 100%;
width: 100%;
margin: 0; /* Add this. */
box-sizing: border-box; /* Add this. */
}
.navbar-menu {
z-index: 100;
position: fixed;
width: 15vw;
height: 100%;
color: #000;
left: 0; /* Add this. */
margin-top: 4vh;
}
.navbar-menu ul {
padding-left: 0;
}
.navbar-menu ul li {
display: block;
width: 100%;
font-size: 22px;
padding: 4px 0 4px 10px;
margin-top: 20px;
}
p {
width: 250px;
}
div#content {
/* Remove these.
margin-left: 160px;
margin-right: 160px;
*/
height: 200px;
}
section {
/* width: 100%; remove */
color: #000;
display: block;
/* position: absolute; remove */
margin-top: 35px; /* replace */
background: lightblue;
transition: opacity 0.9s linear;
-webkit-transition: opacity 0.9s ease-in-out;
-moz-transition: opacity 0.9s ease-in-out;
}
section#sec-home img {
width: 250px;
display: block;
margin: 0 auto 0 auto;
border-radius: 76px 171px 87px 171px;
-moz-border-radius: 76px 171px 87px 171px;
-webkit-border-radius: 76px 171px 87px 171px;
border: 5px solid #000000;
-webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
<div id="content">
<section class="animatedFade" id="sec-home">
<img src="images/portrait1.png" alt="">
<p>asdfr <span class="navn">asdfian</span></p>
</section>
</div>
This is an issue of Fixed Fluid Layout. Please refer to my guide on Science behind Fixed-Fluid Layouts.
Since your .navbar-menu has position: fixed it gets ignored by all other elements.
However, since it has a fixed width, you can easily solve your problem using calc like this:
section {
width: calc(100% - 15vw);
}
Note that you will then also need to remove Margins from your section as to not make it bigger than that.
I have used this question to create buttons. But when I try to create a bottom left shadow to the button the white area will appear as:
.btn {
height: 40px;
background: red;
width: 128px;
margin: 15px 5px 15px 5px;
cursor: hand;
text-align: center;
vertical-align: middle;
line-height: 40px;
-webkit-box-shadow: 2px 3px 3px #666666;
-moz-box-shadow: 2px 3px 3px #666666;
box-shadow: 2px 3px 3px #666666;
}
.btn:before {
width: 0px;
height: 20px;
border-left: 20px solid red;
border-top: 20px solid white;
float:right;
content:"";
}
.btn:hover{
-webkit-box-shadow: 1px 1px 1px #666666;
-moz-box-shadow: 1px 1px 1px #666666;
box-shadow: 1px 1px 1px #666666;
}
.userNave{
width: 140px;
}
<nav class="userNave">
<div class="btn"
onClick="alert('Hi')"
style="">Click Me Me</div>
<div class="btn"
onClick="alert('Hello')"
style="">No Click Me </div>
</nav>
Is there any workaround for this. Or even better. Is there any way to create a true Trapezoid button so that it will work with the shadow and there will be no problem with the background matching.
This is the best I could come up with, using the pseudo elements as the background.
.btn {
position: relative;
height: 40px;
width: 128px;
margin: 15px 5px 15px 5px;
padding: 0 10px 5px 0;
cursor: hand;
text-align: center;
vertical-align: middle;
line-height: 40px;
overflow: hidden;
}
.btn:before {
position: absolute;
left: -23px; top: 0;
width: calc(100% - 5px);
height: 50%;
background: red;
content: "";
z-index: -1;
transform: skewX(45deg);
transform-origin: left top;
box-shadow: 0px 1px 3px 1px #666666;
}
.btn:after {
position: absolute;
left: 0; top: 50%;
width: calc(100% - 5px);
height: calc(50% - 5px);
background: red;
content: "";
z-index: -1;
box-shadow: 2px 2px 4px #666666;
}
.userNave {
width: 140px;
}
<nav class="userNave">
<div class="btn" onClick="alert('Hi')" style="">Click Me Me</div>
<div class="btn" onClick="alert('Hello')" style="">No Click Me</div>
</nav>
A SVG image would most likely be the better choice though.
.btn {
position: relative;
height: 40px;
width: 128px;
margin: 15px 5px 15px 5px;
padding: 0 0 5px 0;
cursor: hand;
text-align: center;
vertical-align: middle;
line-height: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='trapezoid' viewbox='0 0 118 45' preserveAspectRatio='none'%3E %3Cfilter id='dropshadow' height='130%25'%3E %3CfeGaussianBlur in='SourceAlpha' stdDeviation='3'/%3E %3C!-- stdDeviation is how much to blur --%3E %3CfeOffset dx='2' dy='2' result='offsetblur'/%3E %3C!-- how much to offset --%3E %3CfeMerge%3E %3CfeMergeNode/%3E %3C!-- this contains the offset blurred image --%3E %3CfeMergeNode in='SourceGraphic'/%3E %3C!-- this contains the element that the filter is applied to --%3E %3C/feMerge%3E %3C/filter%3E %3Cpath d='M0,0 L100,0 L120,20 L120,40 L0,40z' fill='red' style='filter:url(%23dropshadow)'%3E%3C/path%3E %3C/svg%3E");
}
.userNave {
width: 140px;
}
<nav class="userNave">
<div class="btn" onClick="alert('Hi')" style="">Click Me Me</div>
<div class="btn" onClick="alert('Hello')" style="">No Click Me</div>
</nav>
In your example, you can't add a proper box-shadow without having these white parts on each side. That is because the CSS border colouring the grey shaped trapeziod DIV.
In the example above, they are using an .SVG file (image), since it is an image, the original shape of it is a trapezoid, not a rectangle with white side like yours.
You will need to draw an .svg in the shape and color you want, and then add a shadow to the element itself.
Here are more informations about SVG.
I hope it helps.
I've created a div that contains a box, within that box is text and a link. What I want is when a person hovers over this box with the link, a red line appears on the bottom of the box. At the moment I've managed this but I want the red line to be the width of the grey box and only 5 pixels in height.
#teamspeak_box {
width: 159px;
height: 43px;
background: #212121;
bottom: 82px;
right: 76px;
position: absolute;
border-radius: 0px 0px 5px 5px;
}
#teamspeak_box_2 {
width: 43px;
height: 43px;
background: #313131;
bottom: 82px;
right: 191px;
position: absolute;
border-radius: 0px 0px 0px 5px;
}
#teamspeak_text {
color: white;
bottom: 93px;
right: 66px;
position: absolute;
}
#teamspeak_image {
bottom: 80px;
right: 104px;
position: absolute;
}
#teamspeak_image a:hover {
background-color: #C62828;
transition: all 0.5s ease;
}
<div id="teamspeak_box"></div>
<div id="teamspeak_box_2">
</div>
<div id="teamspeak_text">
<p>TEAMSPEAK
<P/>
</div>
<div id="teamspeak_image">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
I find your element positioning insane. Try this one
HTML
<a href="ts3server://craft412.serveminecraft.net:9987">
<div class="teamspeak-box">
<div class="teamspeak-icon">
<img src="http://filepic.ru/file/1436899103.png" alt="">
</div>
<p>TEAMSPEAK</p>
</div>
</a>
CSS
.teamspeak-box{
width: 159px;
height: 43px;
background: #212121;
border-radius: 0px 0px 5px 5px;
overflow: hidden;
color: white;
display: table;
}
.teamspeak-icon{
width: 43px;
height: 43px;
background: #313131;
display: table-cell;
transition: all 0.5s ease;
}
.teamspeak-icon img{
width: 100%;
}
.teamspeak-box p{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
-webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
-moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}
Run this code on JSFiddle
Basically you want to change the styling on one element while hovering another. This can be done the following way:
#teamspeak_image a:hover ~ #teamspeak_box {
background-color: #C62828;
transition: all 0.5s ease;
}
See this answer for more info. And you might consider adding a border-bottom: 5px solid red; to the box instead of background-color.
In order for the red line to be the width of the grey box and 5px tall,
use the css property to set the display of the grey box to block. Thus, for the grey box use:
display:block;
height:5px;
After that you can set other css properties for the links inside the grey box.
I have a fixed nav bar, that follows when scrolling.
But upon scrolling over text/images within tags it seems to go in front of the navbar, rather then behind.
Why is this? How can I fix it?
Fiddle
nav {
background-color: #262626;
height: 60px;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
nav a {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 60px;
text-transform: uppercase;
margin: 7px;
}
nav a:link {
color: #C8C8C8;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
nav a:visited {
color: #C8C8C8;
}
nav a:hover {
color: #199ABA;
}
#menu {
margin-right: 375px;
margin-left: 375px;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}
#headertop {
margin: 0px;
width: 100%;
height: 650px;
font-family: 'Open Sans', sans-serif;
}
#headertop h1 {
position: absolute;
margin-left: 375px;
margin-right: 375px;
margin-top: 178px;
line-height: 45px;
font-size: 50px;
color: #33CCFF;
width: 550px;
height: 100%;
}
<nav>
<div id="menu">
<strong>Home</strong>
</div>
</nav>
<div id="headertop">
<h1>THANKS</h1>
</div>
This is usually caused by your z-index, make sure you put:
CSS
z-index: 500 // or whatever number that is a positive real number.
Yep, I was right, see this DEMO.
nav {
background-color: #262626;
height: 60px;
z-index:1; //any higher integer value
width: 100%;
position: fixed;
top: 0;
bottom: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
}
Refer z-index in W3Schools
also Refer CSS-Tricks
If anything is overflowing the nav or any div, try using z-index.