My question is, how can I display select elements full screen (not like F11 full screen, but like having it take up the whole client browser screen space). I have to take into consideration the people who will be using my website (once it's on a .com domain), and one of the main things is I want the first three elements (logo graphic, h1 text, and h2 text) to fill up the first space, until you scroll down. How do you do that?
I tried to come up with a solution to this, so I tried changing the padding and margins around to the correct settings, but then I realized, it's only for my monitor/device. Is there any way I could make it specific for each device?
Website Link: http://noclip.ga/1/ (A friend and I are both working on different designs for it.)
PS: I have a slide in menu (from the left), will that affect the solution?
PPS: I couldn't find this post anywhere, so if you can find it, just send me a link...
EDIT: Code.
https://jsfiddle.net/052Lu6xt/2/
<body>
<nav>
<ul><center>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Prices</li>
</center></ul>
</nav>
<article>
<div id="content">
<center>
<img src="img/logo.png" style="width: 256px; height: 256px; margin: 20px 20px 20px 20px;">
<h1 style="padding: 5px 20px 0px 20px;">NØCLIP</h1>
<h2 style="padding: 5px 20px 60px 20px;">Web development made easy.</h2>
<table class="maintable" style="text-align: center; width: 100%; font-family: Josefin Sans; font-size: 40px; color: #C6C6C6;">
<tbody>
<tr>
<td>Quick</td>
<td>Affordable</td>
<td>Easy</td>
</tr>
<tr style="font-family: Arvo; font-size: 32px;">
<td>We strive to provide you with a professional product in a timely manner.</td>
<td>Our services start at as low as $60!</td>
<td>We make it easy for you by optimizing your workload so you tell us what to do, and we do it.</td>
</tr>
</tbody>
</table>
</center>
</div>
</article>
</body>
CSS:
#import url(https://fonts.googleapis.com/css?family=Montserrat:700|Arvo|Josefin+Sans:600);
/* Made By NOCLIP */
body {
background: rgb(5,6,6);
width:100%;
margin: auto;
}
h1 {
font-family: Montserrat;
font-size: 64px;
text-align: center;
color: #fff;
}
h2 {
font-family: Arvo;
font-size: 36px;
text-align: center;
color: #ececec;
}
h3 {
display: inline;
font-family: Arvo;
font-size: 32px;
text-align: center;
color: #ededed;
}
#header {
text-align: center;
height: 300px;
width: 100%;
}
.left {
height: 100%;
width: 10%0;
}
.center {
height: 100%;
width: 100%;
}
.textright {
height: 100%;
width: 100%;
}
/* Scrolling Menu */
article {
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: rgb(5,5,6);
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after {
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
nav {
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: rgb(32, 40, 41);
border-right: 50px solid rgba(6, 15, 32, 0.6);
box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2);
z-index: 1;
cursor: pointer;
}
nav:after {
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent rgb(72, 97, 111);
}
nav ul {
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
article, article:after, nav, nav *{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover {
left: 0;
}
nav:hover ~ article {
-webkit-transform: translateX(16em) perspective(600px) rotateY(0deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(0deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(0deg);
-o-transform: translateX(16em) perspective(600px) rotateY(0deg);
transform: translateX(16em) perspective(600px) rotateY(0deg);
}
nav:hover ~ article:after {
left: 60%;
}
li a {
font-family: Josefin Sans;
font-size: 36px;
color: #fff;
text-decoration: none;
text-transform: lowercase;
}
li a:hover {
text-decoration: underline;
color: #0092ff;
}
li {
padding-top: 38%;
}
Put the logo, h1 and h3 text within a div; this div should have a width of 100vw (viewport-width) and a height of 100vh (viewport-height).
#top_div {
display: block;
width: 100vw;
height: 100vh;
}
#top_div img {
width: 100%;
max-width: ..px //up to you
height: auto; //keep the original width/height ratio
}
#top_div h1 {
font-size: 10vw //play with these numbers to get the ratios right
}
#top_div h3 {
font-size: 8vw //play with these numbers to get the ratios right
}
Fist of all set the html and body to 100% like:
body, html {
height: 100%;
}
Set main container to 100%:
.container{
text-align:center;
height:100%;
}
Set height of your inner 2 container of image and h1, h2 divided them 100%. I am using equal 50% of height in the following example.
.inner-div{
height:50%;
color:white;
}
Make your image to fit the screen size using:
img {
max-width: 100%;
max-height: 100%;
}
That's did the trick.
You can see the result here. https://jsfiddle.net/siddiquinoor/Lmd49qfs/
Related
For some context, I am trying to add a hamburger navigation menu to the top right of my website. When you click on it and it expands out into a full page. Nothing crazy. This part actually works. It's all HTML and CSS, no JS. The rest of the website so far is a 3D globe use ArcGIS API for Javascript contained in a #sceneContainer. I've been playing around with this for a while but can't spot the issue.
There are two main issues:
I initially added the navbar #keyframe BEFORE the scene container in the main.css file, but what would happen is that the navbar would work just fine, but it is covered up by an all-white background. I could tell the globe was still rendering because right when you refresh the website it quickly appears and gets covered up. The second part of this is...
I tried putting the #keyframe AFTER the #sceneContainer which allowed the globe to become visible again, but the navbar won't open up.
Almost seems like they are overlapping each other. I want them to coexist together in the same screen where when you click on the menu it covers the whole map. I know it's probably something obvious but I'm stumped. My guess is I messed up somewhere with the sizing or something with the sceneContainer.
Any help would be super cool! 🙏
Here is my Code:
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
</body>
</html>
Well, I played with the CSS a little... tweaked some things. And I found that this did the job-
<style>
.esri-view {
z-index: -1;
position: absolute;
}
</style>
full example-
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<!-- <link rel="stylesheet" href="main.css"> -->
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<!-- <script src="main.js"></script> -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
.esri-view {
z-index: -1;
position: absolute;
}
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
<script>
require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new SceneView({
container: "sceneContainer", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
});
</script>
</body>
</html>
Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.
As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.
How can I solve this problem? I want the image with the border to have a full opacity.
body {
background-color: #f2f2f2;
color: #404040;
}
div.navbar {
height: 600px;
background: rgba(255, 255, 255, 0.7);
background-image: linear-gradient(25deg, #ec008c, #fc6767);
margin-top: -10px;
margin-left: -5px;
position: relative;
width: 105%;
}
img.logo {
position: absolute;
margin-top: 4%;
margin-left: 25%;
height: 40%;
padding: 25px;
border: 25px solid #f2f2f2;
border-radius: 50%;
}
div.image {
position: relative;
height: 100%;
opacity: 0.2;
background-image: url("img/slide1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div.nav {
position: absolute;
bottom: 0;
margin-left: 600px;
margin-bottom: 50px;
}
a.nav-item {
color: #f2f2f2;
font-weight: bold;
font-size: 25pt;
margin-right: 50px;
text-decoration: underline;
}
a.nav-item:hover,
a.nav-item .active {
text-decoration: overline underline;
}
<div class="navbar">
<img class="logo" src="img/logo.png">
<div class="image">
</div>
<div class="nav">
<a class="nav-item">Home</a>
<a class="nav-item">Twee</a>
</div>
</div>
Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).
body {
margin: 0;
}
div.navbar {
height: 100vh;
/*
IMPORTANT BITS:
- ADDED image and gradient to navbar background and
- REMOVED opacity
THE REST:
The rest was just to make the demo look better/simpler
*/
background:
linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
url(http://placeimg.com/1000/600/arch) no-repeat center;
background-size: cover;
position: relative;
}
.logo-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 25%;
height: 0;
padding-top: 25%;
border:25px solid #f2f2f2;
border-radius: 50%;
overflow: hidden;
}
.logo {
width: 90%;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="navbar">
<div class="logo-wrapper">
<img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
</div>
</div>
</body>
</html>
Child can't override opacity of parent due to how opacity is managed by the browsers.
Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.
.frame{
background-color: #AAAAAA;
opacity: 0.2;
border-radius: 13px;
padding: 21px;
color: #000000;
height: 73px;
}
.frametxt{
margin-top: -73px;
color: #000000 !important;
opacity: 1.0;
}
I'm a real novice and trying to use a web template to design my own website.
I have a basic lightbox gallery and it all works ok, but whatever I have tried, I cannot get a caption to show on the gallery image (not the thumbnail image).
This is a snippet of the html code with a single gallery item:
<div class="gallery-item">
<div class="image">
<div class="overlay">
</div>
<img src="img/gallery/gallery-item1.jpg" alt="image 4">
</div>
I've tried using title="caption" instead of data-title ="caption", but no joy. Here is the css for the lightbox:
#lightbox {
cursor: pointer;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
/* IE Fallback (Solid Colour) */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);
background: rgba(0, 0, 0, 0.7);
-webkit-filter: none !important;
}
#lightbox img {
display: block;
position: absolute;
border: 5px solid #fff;
box-shadow: 0 0 20px #000;
border-radius: 1px;
}
body.blurred > * {
-webkit-filter: blur(2px);
-webkit-transform: translate3d(0, 0, 0);
}
.lightbox-loading {
background: url(../img/loading.gif) center center no-repeat;
width: 31px;
height: 31px;
margin: -16px 0 0 -16px;
position: absolute;
top: 48%;
left: 50%;
}
.lightbox-caption {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
z-index: 1000;
background: #000;
background: rgba(0, 0, 0, 0.7);
}
.lightbox-caption p {
margin: 0 auto;
max-width: 70%;
display: inline-block;
*display: inline;
*zoom: 1;
padding: 10px;
color: #fff;
font-size: 12px;
line-height: 18px;
}
.lightbox-button {
position: absolute;
z-index: 9999;
background: no-repeat center center;
width: 32px;
height: 32px;
opacity: 0.4;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.lightbox-button:hover,
.lightbox-button:focus {
opacity: 1;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
}
.lightbox-close {
right: 30px;
top: 30px;
background-image: url("../img/close.png");
}
.lightbox-next {
right: 30px;
top: 48%;
background-image: url("../img/next.png");
}
.lightbox-previous {
left: 30px;
top: 48%;
background-image: url("../img/previous.png");
}
any tips / help is welcomed. thanks
The caption is being loaded by the 'data-caption' attribute in your anchor tag.
Your anchor tags currently look like this:
You need to insert the caption like this:
For your own interest, if you look at the javascript in the source files you'll see these lines:
setCaption: function () {
var caption = $(plugin.current).data('caption');
if(!!caption && caption.length > 0) {
plugin.caption.fadeIn();
$('p', plugin.caption).text(caption);
}else{
plugin.caption.hide();
}
},
The second line says:
var caption = $(plugin.current).data('caption');
This is setting the caption to whatever text you have in the data-caption field. If it said .data('title'), then you would use data-title = "my caption"
Hope that helps.
Need more code to check I would say but you do have
.lightbox-caption {
display: none;
}
This would usually hide this class. Maybe try and remove display:none or change to block or inline etc?
I am trying to build a progress bar as seen often within checkouts.
The problem is, that the borders between the arrows are transparent and the whole thing should be responsive.
I got it this far:
http://codepen.io/MrBambule/pen/rVBeoz
But I can't figure out how to get the items of the bar to span the whole width of the parent container (red border in the pen) and stay responsive.
I think I could figure it out with JS but I'd rather have a CSS solution.
Help would be much appreciated.
HTML
<ul class="progress-nav">
<li class="active">
<span>1. FOO</span>
</li>
<li>
<span>2. BAR</span>
</li>
<li>
<span>3. BAZ</span>
</li>
</ul>
CSS
$bar-color: rgba(255, 255, 255, 0.2);
$bar-active-color: rgba(255, 255, 255, 0.6);
$arrow-size: 22px;
body {
background: linear-gradient(left, #803689, #5eb6e4);
}
.progress-nav {
position: relative;
font-size: 0;
margin: 100px auto;
width: 80%;
max-width: 900px;
// dummy border to display the width problem
border: 1px solid red;
li {
position: relative;
color: #fff;
font-size: 12px;
display: inline-block;
width: 20%;
margin-right: 48px;
list-style: none;
background: $bar-color;
padding: $arrow-size 0;
transition: background .5s, color .5s;
span {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-33px) translateY(-35%);
}
&:before,
&:after {
content: '';
position: absolute;
display: block;
top: 0;
transition: all .5s;
}
&:before {
border: $arrow-size solid $bar-color;
border-left-color: transparent;
left: -$arrow-size*2;
}
&:after {
border: $arrow-size solid transparent;
border-left-color: $bar-color;
right: -$arrow-size*2;
}
&:first-child:before {
border: none;
width: $arrow-size*2;
height: $arrow-size*2;
background: $bar-color;
border-radius: 4px 0 0 4px;
}
&:last-child:after {
border: none;
right: -$arrow-size;
width: $arrow-size;
height: $arrow-size*2;
background: $bar-color;
border-radius: 0 4px 4px 0;
}
&.active,
&:hover {
background: $bar-active-color;
color: #000;
&:before {
border-color: $bar-active-color;
border-left-color: transparent;
}
&:after {
border-left-color: $bar-active-color;
}
&:first-child:before,
&:last-child:after {
background: $bar-active-color;
}
}
}
}
you could use something like:
.wrap {
width: 100%;
height: 30px;
z-index:-2;white-space: nowrap;
overflow:hidden;
}
.wrap div:first-child{margin-left:-2%;}
.progress {
margin:0;
margin-left:0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index:-1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
which is responsive to the width of the screen.
It makes use of the transform:skew property for the middle bars, and a small border hack for the two far elements. This results in the output shown below:
Result
NOTE
If you are creating these dynamically (and want them all along the same line), then you will need to alter the width stated in the first css rule (currently set to 23%).
When I implemented the background in CSS, it covered the whole page but the length wasn't big enough to cover the content I wanted to write in it. I researched and found a background repeat-y, which I thought would copy the background again, making the page longer. When I code background-repeat: y; }
into CSS, it gives me the length I wanted, but splits the background so it doesn't cover the whole page. Most of it is white. What am I doing wrong? Thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<b><h2>The beginning of coding:</h2></b>
<img src="runescape.jpg">
</div>
<p></p>
</body>
</html>
CSS:
body {
background-image: url(halftone.png);
background-repeat: repeat-y;
width: 1000px;
height: 4000px;
}
h1 { font-family: 'Lobster', cursive;
color: black;
position: absolute;
top: 25px;
left: 540px;
text-decoration: underline;
}
h2 {font-family: 'lobster', cursive;
color: black;
position: absolute;
top: 540px;
left: 480px;
text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 300px;
left: 320px;
display: 0px auto;
}
#runescape {
position: absolute;
top: 500px;
}
#pagesize {
max-height: 10000px;
}
#ben {
position: absolute;
top: 130px;
left: 290px;
width: 700px;
height: 400px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#cameron {
position: absolute;
top: 285px;
left: 220px;
}
#pastcoding {
position: absolute;
top: 100px;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Try background-size:cover; to your body
Yeah background-size:cover; is a enough option. But may be it doesn't view your image completely as expected. Best option to accomplish your task is that the image should re-size proportional to your body size and use background-size: (width)px (height)px; in your body styling. But this is only applicable to fixed size body. Unless it won't be pretty. :-)
Try background-repeat: repeat; and min-height: 1080px; to body in css and change 1080px to as required to you.