I need to create a background pentagon for my page header. In order to do this, I:
1) cannot edit the html
2) am doing the styling with SASS.
How do I get the shape to appear like this wireframe image, and without transforming the text? In other words, the middle point of the pentagon must be at the bottom. Here is the compiled CSS and the HTML.
/* Header */
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<!--
View source is a feature, not a bug. Thanks for your curiosity and
interest in participating!
Here are the submission guidelines for the new and improved csszengarden.com:
- CSS3? Of course! Prefix for ALL browsers where necessary.
- go responsive; test your layout at multiple screen sizes.
- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
- Graceful degradation is acceptable, and in fact highly encouraged.
- use classes for styling. Don't use ids.
- web fonts are cool, just make sure you have a license to share the files. Hosted
services that are applied via the CSS file (ie. Google Fonts) will work fine, but
most that require custom HTML won't. TypeKit is supported, see the readme on this
page for usage instructions: https://github.com/mezzoblue/csszengarden.com/
And a few tips on building your CSS file:
- use :first-child, :last-child and :nth-child to get at non-classed elements
- use ::before and ::after to create pseudo-elements for extra styling
- use multiple background images to apply as many as you need to any element
- use the Kellum Method for image replacement, if still needed.
- don't rely on the extra divs at the bottom. Use ::before and ::after instead.
-->
<body id="css-zen-garden">
<div class="page-wrapper">
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
</body>
</html>
You can use multiple linear-gradient like this:
/* Header */
header {
background:
linear-gradient(#000,#000)0 0/100% calc(100% - 70px) no-repeat,
linear-gradient(to bottom left,#000 50%,transparent 51%)0% 100%/50.5% 70px no-repeat,
linear-gradient(to bottom right,#000 50%,transparent 51%)100% 100%/50% 70px no-repeat;
color: #ffffff;
width: 100%;
padding-bottom:50px;
text-align: center;
}
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
For the Zen Garden, you want to get really familiar with pseudo elements. Here's an example: https://jsfiddle.net/sheriffderek/3ykb2k3k
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
<header>
<!-- no markup change... -->
</header>
Lots of ideas here: Is there a way to use SVG as content in a pseudo element :before or :after
header {
min-height: 300px;
background: gray;
position: relative; /* to create a boundary for the absolute children */
}
header:before {
content: '';
/* has to have something in 'content' or :before and :after don't work */
display: block;
width: 100%;
height: 200px;
position: absolute;
/* positioned based on closest relative parent */
top: 0;
left: 0;
background: red; /* could be an image or gradient or many things */
background-image: url('https://am23.akamaized.net/tms/cnt/uploads/2015/04/Revenge-of-the-Nerds-1984-revenge-of-the-nerds-11710197-950-534.jpg');
background-size: cover;
-webkit-clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
/* here's a fun new approach */
}
http://bennettfeely.com/clippy
Another way of doing this is simply use clip-path css property like this
header {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
padding:60px 0;
clip-path:polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
}
I hope it helps!
Related
I designed a web page using bootstrap studio and all the style attributes are inline. I want to change this and add these to a separate css file. I have trouble doing that, because when i add the image as 'background-image:url('img/pic.jpg'); it doesn't show up. And i don't know how to convert all the following attributes . The following is the code.
<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">
for example what I want is ,
if html code is <div class="intro" style="width:500px;height:400px;">
the code for the separate css should be
.intro
{
width:500px;
height:400px;
}
You can write it in your css file as you did in your question
.intro
{
width:500px;
height:400px;
}
But note to use the right class name in your example it would be
<div class="intro-body"> // and not "intro"
.intro-body {
background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body">"</div>
Then in your .html file you have to include the css file. Add the following line in the head section of your html document.
<link rel="stylesheet" href="yourstyle.css">
Note: Be careful at the href attribute it depends on the filestructure you have in your project.
For instance when your index.html file is in the base folder and the css file is in the directory /styles
index.html
styles
yourstyle.css
Then you have to write
<link rel="stylesheet" href="./styles/yourstyle.css"> inside your index.html file
just copy the inline css and paste this code in css with your class sector .intro-body
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(assets/img/0274207612d515f49012c87803a9e631.gif) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body"></div>
I think you have put css in seperate folder so you are having this issue.
After Separating your css, Change url to relative values.
ie. url('img/pic.jpg') to url('./img/pic.jpg')
.intro-body {
width:500px;
height:400px;
background: linear-gradient(90deg, rgba(8,1,36,0.4), transparent 49%), url('./img/pic.jpg') right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<body >
<div class="intro-body"></div>
</body>
create separate css file and include your css file to html page as follows.
<link rel="stylesheet" href="mystyle.css">
add your css to that file as shown below.
.intro-body {
/*your css goes here*/
}
if the folder structure is :
FolderProject/css/style.css for the css
FolderProject/index.html for the html
FolderProject/assets/img/
The css file:
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("../assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
index.html:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="intro-body">
</div>
</body>
</html>
So I've been searching for a bit why my background is not showing up, ill start with my bg css:
body {
background-image: linear-gradient
(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;
}
When I inspect element my html and body both have a width of 0px which is why it's not showing I guess.
I use Bootstrap 3 and removing it from my page does fix the issue but I use Bootstrap for a lot so that doesn't really work for me.
One cheap fix I use currently is creating a span inside the body tag with a single character and then making it's opacity 0 and hiding it in a corner but obviously this should only be temporary.
I've tried background-color which does work so I'm guessing there is some conflict between Bootstrap 3 and background-image or linear-gradient.
Does anyone know of a proper way to fix this issue?
EDIT: As pointed out in the comments, I realize if the body width is 0px it can't show my bg but what's causing my body width to be 0px?
EDIT2: Added HTML for reproduction:
<!DOCTYPE HTML>
<htmL>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/mycss.css" />
</head>
<body>
</body>
</htmL>
What is causing this behaviour is the rule margin:0 from normalize.less.
If you set the margin of the body to any value except 0, the background-image will render.
body {
margin: 1px;
background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027);
}
You just need to remove a space after "linear-gradient". This css property should be written like this linear-gradient() and in the brackets you can put your code. The overall code should be like below.
body {background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;}
I was reading this article http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/ .I created this little demo of what this article teaches.
<html>
<head>
<title>Css Gradients</title>
<style>
.demo{
height: 200px;
width: 400px;
margin-bottom: 10px;
background: linear-gradient(to right,red,yellow);
/*background: linear-gradient(23deg,red,yellow);*/
}
#radial{
/*background: radial-gradient(at center,red,yellow);*/
background: radial-gradient(circle closest-corner,red,yellow);
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo" id="radial"></div>
</body>
</html>
Now the problem is,Firefox is rendering the background gradient correctly but Google Chrome(version 22) is not rendering the background gradient at all.See the screenshots
At the moment (Chrome 24 / Safari 6) Webkit still have not added support for unprefixed css3 gradients yet.
This is a bit sad, if you consider the fact that even IE10(!) uses unprefixed syntax already.
Reference: http://caniuse.com/#search=grad
What's the best way to create multiple backgrounds with HTML5 and CSS and keep your markup semantic? I realise CSS3 supports multiple backgrounds but I want to use gradients also and am interested in how this is being completed practically - not just the theory of it.
The traditional approach might be to do something like:
<div class="background-outer">
<div class="background-inner">
<article class="exiting-news">
<p>We'll talk about something exciting here</p>
</article>
<div>
</div>
I'd like a way to do this in a way that is cross browser friendly and that doesn't involve any programmatic work in Javascript or ASP.net/PHP etc
It may be a case of just using more semantic class names, but I'm stumped!
Note: Someone may have answered this already but it's a difficult thing to search on, apologies if this is a repeat!
It depends on whether it's a personal project or for a client. Nested divs never hurt anyone, they're quick, and reliable in all browsers. Use with no shame if it's for someone else.
Otherwise, you're going to have to drop support for some browsers. Using multiple backgrounds in CSS is one way of doing that. The second I use sometimes is, depending on how many backgrounds you have, to position:relative the main block, and position:absolute the :before and :after elements to fill it and set backgrounds on them too. Works on basically all browsers very nicely.
Edit:
A validating code sample for the pseudo-element trick I use:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
div:before {
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
}
div:after {
background: -moz-linear-gradient(left, rgba(239,47,47,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(left, rgba(239,47,47,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
}
div {background: url(http://www.google.co.uk/images/srpr/logo3w.png); position: relative; margin: 1em; min-height: 10em;}
div:after, div:before {content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
div > * {position: relative; z-index:1}
</style>
<div>
<h1>This div has three backgrounds</h1>
<p>Its content has to be wrapped, but that's not normally a 'semantic' problem.
</div>
I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.
My problem is not on jsfiddle.
And here is my folder structure:
localhost/website/img
localhost/website/css
localhost/website
http://jsfiddle.net/p8eS3/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="description" />
<meta name="author" content="author" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Title</title>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="logo"></div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* Body */
#body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: #ccc;
}
/* Container */
#container {
width: 100%;
background: #000;
}
/* Sidebar */
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40%;
float: left;
position: fixed;
}
/* Logo */
#logo {
background-image: url(../img/logo.png);
}
You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.
If not the paths to the images are wrong.
The images aren't loading as jsfiddle won't recognise ../img/sidebar.png as this will look locally on their server.
I'm assuming that this is not your initial problem though, and that you are experiencing problems getting the right path on your application.
I would recommend 'rooting' your image url so that it works from the root folder to the location like:
background: url(/img/sidebar.png) repeat-y;
Could be your folder structure. Are the images in a folder the same level as your html file, or a level up. If they're the same level, try replacing ../images with ./images
Your path to the images is most likely off. This will be hard to debug via a js fiddle. Can you post your directory structure?
It's because your divs don't actually take up any space, so you can't see any background. See your modified fiddle for an example of how to fix this.
Alternatively, you might want to consider using HTML img tags.
You have to specify a width and a height to your #logo element so that the BG can appear.
Try,
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40px; /* your background width */
height:60px; /* your background height */
float: left;
position: fixed;
}
/* Logo */
#logo {
background: url(../img/logo.png) 0 0 no-repeat;
width: 40px; /* your logo width */
height:60px; /* your logo height */
}