Just started web dev, and I want to reproduce this navbar style.
Can anyone help me with just how to stylishing navbart list item for one element? I'll try to learn how to to this. Thanks
PS: to be more helpful, if it's possible to do it with sass syntaxe, it will be great. Thanks again xD
It is really simple! Simply add some divs into your nav. And style it accordingly. I didn't include the icons you can easily find them. The rainbow border on the bottom can also be set to stripes, check out this website: https://stripesgenerator.com
body {
margin: 0;
background-color: #f0f0f0
}
nav {
width: 80vw;
background-color: white;
margin: auto;
/* Border bottom */
border-bottom: 2px solid green;
border-image-source: linear-gradient(to right, gray, red, orange, yellow, green, lightblue, darkblue);
border-image-slice: 20;
}
div {
display: inline-block;
padding: 10vh 2.4vw;
}
<nav>
<div>Home</div>
<div>Dex</div>
<div>Apps</div>
<div>Trading</div>
<div>TV</div>
<div>Play</div>
<div>News</div>
</nav>
they probably use flexbox to do this.
I recommend the very useful website CSSTRICKS to see what it is ;)
you can see inside the code of the page with a right click then "inspect" to see everything on their html and css.
Related
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I'm currently working on a portfolio project and I have a concept for the header but I am having difficult achieving it.
I want to make the bottom border of my header (and top border of my footer) look like it's a brush stroke. As seen in my photobucket link.
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50243PM.png
I created a border image to use but it's getting hidden in the box model since the headers background color is the same as the border. I changed the background color to black so it can easily be seen
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50110PM.png
So what I would like to know is: Is there a way to get the border image to border the outside, not the inside of the header?
This is the code I have
HTML
<header>
<h1>My Name</h1>
<nav>
<ul>
<li><span id="current">Projects</span></li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header{
display: block;
background-color: black;
padding: 5px 10px;
border-bottom: 15px solid transparent;
border-image: url("border.png") 0 0 33 0;
}
h1{
float: left;
}
nav{
text-align: right;
}
nav li{
display: inline;
list-style: none;
}
Any advice would be greatly appreciated, THANKS!
The border-image-outset property specifies the amount by which the border image area extends beyond the border box.
http://www.w3schools.com/cssref/css3_pr_border-image-outset.asp
div {
border-image-source: url(border.png);
border-image-outset: 15px;
}
I believe you should not do it. You can wrap your footer into a bordered-footer and add the border to the borderedfooter. In general, the border is part of a tag. You can set border-image-outset as #bpettijohn pointed out, but I think that would be confusing later when you are already used to the standard meaning of border.
I was looking at ways to include a title in a page and I have come across this website: (see image below) which does exactly what I want but I can't figure out how to accomplish it. The trouble I have is in only having a single title image at the top without it repeating through to the bottom. I have used the css background-image:url(image) on the main div but the repeating image problem is present. Any help or insight on this matter will be greatly appreciated.
EDIT: I need the rest of the background to repeat until the end. I think having the rest of the background be a separate image may be part of the solution but I don't know if a title image div can be forced to the same layer. Again any insight is valuable as I am new to HTML and CSS. Also this is the best example website I can find, if you are offended please edit with a better example. Thank You!
You can get it done using the below CSS,
#elemId
{
background: #00ff00 url('testimage.jpg') no-repeat top left;
}
Hope it will help
background-repeat:no-repeat;
This is the css trick to NOT repeat a background image.
If you didn't know this already, how the hell could you make it to this website ?
from you link
body {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
background: url("/marines-theme/images/layout/body-background.jpg") repeat-x scroll left 23px rgba(0, 0, 0, 0);
margin: 0 auto;
min-width: 980px;
overflow-x: hidden;
}
#overview-wrap {
background: url("/image/image_gallery?uuid=a394504c-a638-449e-bb56-b517cfe7d3ee&groupId=10162&t=1349957392552") no-repeat scroll center top #000000;
}
Those are nested markups like so :
<body>
<div id="wrapper">
<div id="overview-wrap"></div>
</div>
</body>
That's about it.
ps. i added a screenshot of what you want to show. Can you remove the (now useless) link?
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/