I have a list of nav items that I want to eventually be able to swipe through so I've created an unordered list which initially has a width of 1000% for testing and the links are positioned inline-block. This works well if there are enough links to fill the whole width of the page but if there is only a few links they get stuck to the left of the nav, ideally what I would like to do is have these centered. Ive tried adding text-align: center to the nav but this centers the links in the 1000% wide space and not the 100% page width. Can anyone recommend a solution as I thought this may be achievable with just CSS
JS Fiddle (with just a few links): http://jsfiddle.net/HS4VE/
CSS
nav {
padding: 10px 0;
overflow: hidden;
text-align: center;
border: 1px solid #cccccc;
border-left: 0;
border-right: 0;
}
nav li {
display: inline-block;
vertical-align: middle;
zoom: 1;
margin-right: -4px;
position: relative;
}
nav a {
color: white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #363636));
background-image: -webkit-linear-gradient(#454545, #363636);
background-image: -moz-linear-gradient(#454545, #363636);
background-image: -o-linear-gradient(#454545, #363636);
background-image: linear-gradient(#454545, #363636);
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 15px;
width: 186px;
display: block;
border-right: 1px solid white;
text-align: center;
}
nav a.is-active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fe57ae), to(#fe329b));
background-image: -webkit-linear-gradient(#fe57ae, #fe329b);
background-image: -moz-linear-gradient(#fe57ae, #fe329b);
background-image: -o-linear-gradient(#fe57ae, #fe329b);
background-image: linear-gradient(#fe57ae, #fe329b);
}
.inner {
width: 1000%;
}
Use this:
.inner {
white-space:nowrap;
max-width: 1000%;
}
Demo: http://jsfiddle.net/HS4VE/3/
Related
Here's my issue:
I have a mockup from a design company that wants a text block with a 'broken' square border behind some big text that looks like this (description: there is a small white frame behind large text that is broken up by the text, and then a smaller text link below):
Image of an element on client's website,
In the design, the text is displayed accross the white square frame. The way I have implemented it right now is to make the big text's background color gray. Because the current image's background is gray the desired effect is achieved.
What is needed is to achieve that effect (of breaking the white frame) REGARDLESS of the appearance of the image. Because right now, this happens:
the gray background of the text appears like a box in front of the image -- it ought to be transparent
To further illustrate, if I set the background-color of the big text to transparent, the whole frame is shown (the desired effect is a broken frame):
background: transparent #1
More info if it helps:
The white frame element is just a div with a white border.
I am not sure exactly what to search for in this case, if there is an appropriate CSS solution (preferrable) or if I need to use SVG or maybe a PNG? Thank you for any help.
As #Temani Afif pointed out in the comments, it's not one box, but two separate shapes in CSS.
I made an example to illustrate this using flexbox.
.page {
background-color: black;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box-top {
width: 100px;
height: 10px;
border-color: white;
border-width: 2px;
border-style: solid;
border-bottom: none;
}
.box-bottom {
width: 100px;
height: 30px;
border-color: white;
border-width: 2px;
border-style: solid;
border-top: none;
}
.separator {
color: white;
width: 100%;
margin: 5px 0;
padding: 0;
font-size: 40px;
text-align: center;
}
<div class="page">
<div class="box-top"></div>
<p class="separator">
Headline
</p>
<div class="box-bottom"></div>
</div>
You can make a square element with a border and use a mask on it:
body {
margin: 0;
min-height: 100vh;
background: black;
box-sizing: border-box;
padding-top: 1px;
}
h2.fancy {
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}
<h2 class=fancy>I'm a fancy title...</h2>
The advantage of this solution is that you can make it scale easily with what might change on various screen sizes. For example, with the title's font-size:
document.querySelector('input.font-size').addEventListener('input', function(e) {
document.querySelector('h2').style.fontSize = e.target.value + 'px';
})
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/800) center /cover;
box-sizing: border-box;
padding-top: 1px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
h2.fancy {
z-index: 1;
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
display: block;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}
<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>
The disadvantage is that it doesn't work in IE or Edge lower than 18 or in Opera mini. This particular example works in IE 18, though, as it only uses polygon().
I am attempting to get a div, bar-grow to be width: 80%; of the header above it. Right now, it is taking 80% width of the parent container. I am unsure how I change this so that it is working how I want it.
Any suggestions?
.header-wrap {
border: 1px solid black;
}
.header {
font-size: 2rem;
margin-bottom: 12px;
display: inline;
}
.bar-grow {
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 100% 7px;
transition: 1s;-webkit-transition: 1s;
margin-bottom: 50px;
height: 7px;
width: 80%;
}
<div class="header-wrap">
<p class="header">Structural Framing Solutions</p>
<div class="bar-grow"></div>
</div>
You need something to wrap both of those elements that isn't a full width element. I added a div and set it to display: inline-block. You could apply that style to the header-wrap div if you don't want an extra div (note it will shrink that div to be just wide enough to contain it's contents).
.header-wrap {
border: 1px solid black;
}
.header {
font-size: 2rem;
margin-bottom: 12px;
display: inline;
}
.header-width-constrainer {
display: inline-block;
}
.bar-grow {
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 100% 7px;
transition: 1s;-webkit-transition: 1s;
margin-bottom: 50px;
height: 7px;
width: 80%;
}
<div class="header-wrap">
<div class="header-width-constrainer">
<p class="header">Structural Framing Solutions</p>
<div class="bar-grow"></div>
</div>
</div>
Why not simply move the gradient to the header element and control easily its size:
.header-wrap {
border: 1px solid black;
}
.header {
font-size: 2rem;
margin-bottom: 52px;
padding-bottom:7px;
display: inline-block;
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 80% 7px;
background-position:0 100%;
}
<div class="header-wrap">
<p class="header">Structural Framing Solutions</p>
</div>
I don't think there is an easy way to make a div like "bar-grow" 80% width of it's sibling (the text, "Structural Framing Solutions")... Technically, that text is sitting inside of a div that takes up the full width 100% of the screen, so your code is working as intended. An alternate approach, would be something like this:
.bar-grow {
background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
background-size: 100% 7px;
transition: 1s;-webkit-transition: 1s;
margin-bottom: 50px;
height: 7px;
width: 300px;
}
Notice how I changed 80% width to 300px width?
300px, roughly, is 80% of the title's length. I used my eye ball to choose the 300px. Make that small adjustment and see if it can work for you.
With my edit, it could render like this:
Hopefully I am understanding the problem, correctly!
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.
I have a border, which fits 100% width of container div. What I want to do - add background (or img tag) in center of that border, like in example:
http://www.part.lt/img/8a22897d62de874896a3b62107032bd3507.gif
(The "+" is image and line from left and right must be border). White space must be padding or margin from border.
How can I do this?
What I have tried:
JSFiddle
<div class="full-border">
<div class="full-border-cross"></div>
</div>
.full-border {
border-bottom: 1px solid rgb(204,204,204);
padding: 13px 0;
position: relative;
}
.full-border-cross {
background: #fff url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center;
position: absolute;
width: 100%;
height: 100%; padding: 0 13px;
}
Does the white space "have" to be padding? or can you just assign it a certain width?
I've updated your fiddle with this code:
.full-border-cross {
background: url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center #fff;
position: absolute;
left: 50%;
width: 40px;
height: 100%;
}
Here: http://jsfiddle.net/WHVbc/17/
I have updated your requirement below and also available in the following fiddle. Refer that...
Here: http://jsfiddle.net/wRa8n/
<div class="full-border"></div>
<div class="full-border-cross"></div>
<div class="full-border"></div>
.full-border {
border-bottom: 1px solid #CCCCCC;
display: inline-block;
margin: 0 16px;
padding: 0;
width: 200px;
}
.full-border-cross {
background: url("http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: auto;
padding-top: 13px;
width: 15px;
}
I am trying to build a navigation menu using nested lists, however whenever I set a height for the li's it breaks the lists and the sub menus lay over the final li, I have link to what I mean,
Nested List Example
How can I fix my code so I achieve something similar to the following?
List item
List item
Sub List item
Sub List item
Sub List item
Sub List item
List item
Change your CSS to this.
.seconday_nav {
width: 95px;
float: left;
margin: 32px 0px 0px 0px;
}
ul.subnav {
margin-left: 60px;
}
.seconday_nav ul.subnav li {
width: 93px;
text-align: right;
padding: 10px 0px;
border: 1px solid green;
display: block;
height: 25px;
}
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
display: block;
width: 100%;
height: 100%;
padding: 0px 10px 0px 10px;
}
What I did, is put a margin-left of 60 only on your sub navigation. This now pushes that UL out from the left and gives it the appearance your looking for.
Several problems here:
.seconday_nav {
width: 95px;
float: left;
margin: 32px 0px 0px 0px; }
.seconday_nav ul li, .seconday_nav ul.subnav li {
width: 93px;
text-align: right;
padding: 10px 0px;
border: 1px solid green;
display: block;
height: 25px; } /* PROBLEM 1 */
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
display: block;
width: 100%; /* PROBLEM 2 */
height: 100%;
padding: 0px 10px 0px 10px; }
Problem 1: you are giving height of 25px to element which contains all sublist items .seconday_nav ul li affects li that contains subnav.
Problem 2.: You are giving padding to element which width is declared to 100% which always gives 100% of parent + padding so it overflows parent. Since you already give a elements display: block there is no need to give them 100% width, only height.
That should help you start solve your problem :)