I want to create a navbar with a transparent background and also hide the text underneath when I scroll. I want an overflow hidden but I cant get it to work. This is very specific because I have a linear-gradient with a rotation of 60% hence I cant just use the same background!
I have provided a Codepen replicating the problem down below.
HTML Code
<nav>
<h2>Logo</h2>
</nav>
<div class="pageContainer">
<p>Some test text that I want to be hidden under the navbar when I scroll!</p>
</div>
CSS code
* {
margin: 0;
padding: 0;
color: white;
font-family: sans-serif
}
body {
background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
}
nav {
box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px;
width: 100%;
height: 100px;
position: fixed;
top: 0;
display:flex;
align-items: center;
padding: 0 20px;
}
.pageContainer {
height: 200vh;
margin-top: 150px;
padding: 0 20px;
}
https://codepen.io/Forsrobin/pen/ZExRyMa
Related
In the below image I am trying to make the background color stop at the red line. How can I do that?
I have tried to add bottom 50px or something but if I add more than 2 settings to the background it won't work any more.
I can go top and left bottom and right whatever combination but maximum 2, when I add the third it won't work.
.div2 {
position: relative;
width: 35%;
background: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
margin-left: 15%;
margin-top: 11%;
padding-top: 1px;
}
.pdiv2 {
font-family: futuraptbook;
font-size: 100px;
letter-spacing: -2px;
margin: 35px;
background-image: linear-gradient(#54B3A1, #54B3A1);
background-position: left 220px top 165px;
background-repeat: no-repeat;
}
.btn1 {
font-family: futuraptdemi;
margin: 0px 30px 30px 30px;
width: 188px;
height: 50px;
background-color: #f34213;
color: white;
border-radius: 40px;
}
<div class="div2">
<p class="pdiv2">DRINK LESS, DRINK BETTER.</p>
<form action="#">
<button class="btn1">FIND OUT MORE</button>
</form>
</div>
So basically how I achieved this in the end as it was not possible with background: I have made another div with the exact same size as I wanted the background to be, set its background a the green color, given it position: relative, and negative margin so it will overlap with the text and given the text higher z-index
When you uncomment the unordered list tag the second container div falls a bit down. If you actually could explain me why this is happening and told me how to remove this behavior I would be thankful.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
text-align: center;
color: rgb(38, 48, 90);
}
ul {
list-style-position: inside;
display: block;
}
<div class="container">
<h1> Depr </h1>
<!--<ul>
<li>Derping</li>
<li>Derping</li>
</ul>-->
</div>
<div class="container">
<h1> Derpina</h1>
</div>
The main reason behind why this occurs is, when you make any element to be inline-block, it aligns to baseline by default. So, when the heights of all elements are not same, it gets scrambled and aligned to their baseline. This is the main problem with all the inline-block and we should correct it by giving the right vertical alignment. To do that, please follow the below snippet:
I found your issue to be vertical alignment. Just give:
.container {
vertical-align: middle; /* This */
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255,255,255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
text-align: center;
color: rgb(38, 48, 90);
}
Preview
Without the <ul> and with it:
JSBin: http://jsbin.com/zalagixovu/edit?output
I'm new at CSS and am going through tutorials, etc. All good – but I'm stuck on the little design below. I am trying to make the layout ignore the horizontal box with the timestamp and I've tried everything – float, position absolute, relative, margins, etc. and at this point I am just throwing tags in without having a clue.
What I am trying to accomplish is for the vertical red box - the "leader line" to connect to the large box below through ignoring the "timestamp" box. Maybe I have structured my HTML poorly and that is making it harder for me to accomplish this?
This is probably pretty simple. I've also been wrestling with the uneven margin around the image but that's less important.
The "Leader line" is of the "vAxis" class. The "timeStamp" block is of the "timeLabel" class.
I made a codePen if the snippet below isn't clear.
Update:
I just realized that I don't have to try to ignore the div with the timestamp. I can just make it use a border-left to continue to draw the vertical. Don't know if that means I am clever, hacky or just getting with the "CSS" way of thinking. The reason I couldn't use absolute is because I want to use this code for multiple components in a Vis.js timeline – and their vertical positions will vary.
I've updated the codepen
Original issue:
body {
background-color: #000;
}
.hAxis {
width: 100%;
height: 10px;
border-bottom: 4px solid #ffffff;
}
.outsideDiv {
position: absolute;
left: 220px;
}
.vAxis {
width: 50px;
height: 100px;
outline: 1px solid red;
border-left: 6px solid rgba(255, 255, 255, .5);
;
}
.box-4 {
background-color: #011c21;
background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
border: 6px solid rgba(255, 255, 255, .5);
width: 330px;
padding: 6px;
}
.box-4:hover {
border: 6px solid rgb(255, 255, 255);
}
.box-4:active {
border: 6px solid rgb(255, 255, 0);
}
.imageDiv {
box-align: center;
display: inline-block;
margin-left: 5px;
margin-right: auto;
}
img {
outline: 1px solid #000;
}
.timeLabel {
color: #D0D1D9;
background: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
margin-bottom: 2px;
text-align: right;
text-shadow: rgb(13, 52, 181) 6px 6px 10px;
outline: 1px solid red;
margin-left: 100px;
width: 250px;
}
.narrative {
color: #cccccc;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 300px;
position: relative;
padding: 10px;
/* text-shadow: rgb(77, 100, 176) 0px 2px 2px; */
}
html {
height: 100%;
}
body {
background-color: #0e1c21;
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxYzM3NDIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgb(0, 0, 0)), color-stop(1, rgb(28, 55, 66)));
/* Android 2.3 */
background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
/* IE10+ */
background-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
}
}
<div class="hAxis"></div>
<div class="outsideDiv">
<div class="vAxis"></div>
<div class="timeLabel">04:35:27</div>
<div class="box-4">
<div class="imageDiv">
<img src="http://placehold.it/320x240/0000ff/000000" width='320' height='240' />
</div>
</div>
<div class="narrative">Cras sit amet maximus at libero, at vehicula justo. Cras sit amet maximus libero, at.
</div>
</div>
In your codepen demo, the red vertical box is already touching the blue box below. So I guess you solved that already.
With regard to the uneven margins around the image, there are several factors in play:
(1) You have set a width on an ancestor container that makes it longer than the image:
.box-4 {
background-color: #011c21;
background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
border: 6px solid rgba(255, 255, 255, .5);
width: 330px; <--- REMOVE THIS
padding: 6px;
}
(2) You have set uneven margins on the immediate container. Even them out.
.imageDiv {
box-align: center;
display: inline-block;
margin-left: 5px; <--- REMOVE THIS, AND..
margin-right: auto; <--- THIS
margin: 5px; <-- NEW
}
(3) An image is an inline-level element, so it has vertical-align: baseline set by default. This elevates it within the container. Override the default:
img {
outline: 1px solid #000;
vertical-align: bottom; <--- NEW
}
revised codepen
adding position:absolute can solve the problem by overlaying the timelabel on the box4
But Try
margin-top:-42px;
in the timelabel class, maybe this is the answer you needed :)
Add display: none to .vAxis This hides this DIV completely (I suppose that's what you mean by "ignore"?)
http://codepen.io/anon/pen/JEOwVo?editors=1100
I have the following div:
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
and I want the text and button to appear centred within the div. Currently it appears like so:
and I am having no luck getting to centre. Here is the css for the transparent-panel div:
.transparent-panel {
padding: 40px 20px 40px 20px;
width: 100%;
height: 100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
I tried using position: relative; on the div and then position: absolute; on the h3 and a tag but that didn't work.
If anyone can help me out it would be much appreciated. I am using Bootstrap 3.
Here is a bootply demo http://www.bootply.com/sQ5gyYn7Ru
One way to do it would be to wrap the panel in a container, put the background color on the container and then use a few lines of CSS to vertically center the panel within the container:
HTML:
<div class="panel-container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
</div>
CSS:
html,body {
height:100%;
}
.panel-container {
height:100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
padding: 40px 20px 40px 20px;
width: 100%;
text-align:center;
/* Code to vertically center below */
position: relative;
top: 50%;
transform: translateY(-50%);
}
Bootply Example
I find it useful to set the container div as display: table, and wrap the content in a inner div set as display: table-cell.
Then you can use the vertical-align property:
Updated BootPly
/* CSS used here will be applied after bootstrap.css */
.teachers-image {
background-size: cover;
height: 418px;
color: #ffffff;
}
.transparent-panel {
padding: 0 20px;
display: table;
width: 100%;
height: 100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel > div {
display: table-cell;
vertical-align: middle;
}
.btn-white-big {
background-color: #ffffff;
height: 50px;
color: #339933;
font-size: 18px;
font-weight: 500;
line-height: 30px;
#include add-border(3px, white, all);
#include border-radius(30px);
&:hover,
&:focus,
&.focus {
background-color: #339933 !important;
color: white;
}
}
<div class="teachers-image">
<div class="transparent-panel">
<div>
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
</div>
</div>
Use a container with View Height for top to bottom centering:
height: 100vh;
The View Height will always use the windows display height.
Fiddle
HTML:
<div class="container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
WATCH VIDEO
</div>
</div>
CSS:
.container {
height: 100vh;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
width: 100%;
text-align:center;
position: relative;
top: 50%;
}
I am trying to get a certain effect on a header for a mockup. It has white glow almost not noticeable. You will see it in this picture i provide behind the title and sub title. How can i get that glow effect with css? I do have a header with the entire thing but is that a good idea to use an image for an entire header? Also i want those two lines near the subtitle. Is it possible to code those lines? And last, the button "order now", will that be possible to make with css or should i just use an image of that and link it?
mockup
jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [what i currently have]
<header>
<h1>Taffies Cupcakes</h1>
<h2>Fresh and tasty</h2>
</header>
body{
background-color:#e7d2c9;
}
header h1{
font-family:georgia;
font-size:46px;
color:#784f3d;
text-align:center;
margin-top:50px;
}
header h2{
font-family:segoe script;
font-size:32px;
color:#846a5f;
text-align:center;
}
All of this is possible to do in CSS 3, I wouldn't recommend it though. Using an image for the button and the header is the best idea if you want it to look the same in all browsers. If you want to do it in CSS anyway try this:
HTML:
<header>
<div class="shadow"></div>
<h1>Taffies Cupcakes</h1>
<h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>
CSS:
header > .shadow {
width: 0px;
height: 0px;
margin: 0px 50%;
box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
height: 1px;
width: 100px;
margin: 5px 20px;
background-color: #846a5f;
display: inline-block;
vertical-align: middle;
}
As the other answers have mentioned, radial-gradient is probably the way to go here. Just apply it to the header element instead of using my version with box-shadow (which might be a little hacky to some).
Update for the button:
HTML:
<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>
CSS:
button.special {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
background-color:#784f3d;
color: #e7d2c9;
text-align: left;
border: 0;
outline: 0;
border-radius: 5px;
height: 42px;
}
button.special > .icon {
width: 27px;
height: 27px;
/*background-image: url('triangle-button.png')*/
position: absolute;
margin: 5px;
}
button.special > .headline {
margin-left: 42px;
font-size: 18px;
}
button.special > .description {
margin-left: 42px;
font-size: 12px;
}
http://jsfiddle.net/ezdr3xdg/17/
Use CSS radial-gradient()
DEMO 1:
body {
height: 100vh;
background-color: #e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%);
}
DEMO 2:
body{
height:100vh;
background-color:#e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%);
}
DEMO 3:
body {
height: 100vh;
background-color: #e7d2c9;
position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}
I have update your jsfiddle with a starting template of sorts. Its CSS# gradients and border-radius. http://jsfiddle.net/ezdr3xdg/7/
the button:
<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>
CSS:
The Button:
#order_now{
background: linear-gradient(#846a5f, brown);
width: 200px;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 12pt;
font-weight: bold;
}
#sub_order{
font-size: 10pt;
font-style: italic;
}
#triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
display: inline-block;
}
#text{
display: inline-block;
}
The Background:
body{
background:linear-gradient(to right, red, blue, red);
}
this should be enough to get you started.