.leftside {
padding: 16px;
background-color: #0E1E2B;
border-bottom-left-radius: 50%;
}`
I made a design for a website page and I want to add the background above in the header using HTML and CSS. in this same background I also added it right-side, here I'm adding the CSS code that I tried. I can not understand how to create a background like this!
Use clip-path. This site generate some figures. Site link: https://bennettfeely.com/clippy/
You can also do this by using pseudo elements and the border CSS property.
Example of the theory behind how this works here: How CSS triangles work
Codepen link: https://codepen.io/thechewy/pen/eYVMLGM
.leftside {
width: 18rem;
height: 10rem;
background: red;
position: relative;
}
/** triangle **/
.leftside:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 0;
border-bottom: 10rem solid white;
border-right: 100px solid transparent;
}
<div class="leftside"></div>
Here's what you may try or start with:
#shape {
width: 200px;
border-top: 120px solid #ec3504;
border-left: 60px solid transparent;
}
<div id="shape"></div>
Alternative options would be to use javascript library or even do in Html 5 canvas.
Related
So I am currently creating a video game using HTML, CSS, and JavaScript. I am working on the design of the page, and I am having a problem. My page has a lot of empty space under it, and creates a huge unused portion of the page that you scroll down to. Is there anyway to stop it from scrolling down?
Here is my code:
* {
overflow: hidden;
}
body {
background-color: antiquewhite;
}
#fullcanvas {
border: 6px double black;
}
#title {
position: relative;
color: darkgreen;
font-family: sans-serif;
font-size: 30px;
border: 0px solid black;
border-width: 0px;
bottom: 667px;
left: 20px;
}
#game_rules_canvas {
position: relative;
border: 10px solid black;
border-width: 8px;
bottom: 678px;
left: 20px;
border-right-style: dashed;
border-left-style: dashed;
height: 400px;
width: 300px;
}
Using your css and recreating the elements referenced as div's doesn't seem to replicate your issue. See here: jsfiddle
The following rule should be stopping all scrolling:
* {
overflow: hidden;
}
Sounds like you've either got other code being used or javascript causing an issue. Things I would do to try and diagnose:
Add overflow: hidden!important; to see if that overrides the problem
Right click and inspect the empty space to see it's styles and what element it's referencing. (<html>, <body>, <other>, etc).
Remove the javascript to see how the page renders.
If you can provide more of your code, or even screenshots, it would help.
I am having a problem with using a goove border because it looks VERY different in one of the browsers (Firefox) than the rest and not much according to the W3 spec:
w3.org: "Looks as if it were carved in the canvas. (This is typically achieved
by creating a “shadow” from two colors that are slightly lighter and
darker than the ‘border-color’.)"
The Firefox version is definitly not "slightly" lighter and causes a problem on a dark background.
Are there are tricks or techniques to get around this and make it look closer to the chrome version in the middle?
You can simulate the effect using a pseudo element with half the border of the element
And opposite color arrangement
.a {
border: 60px groove #233232;
width: 100px;
height: 100px;
}
.b {
border: solid 60px #233232;
border-top-color: red;
border-left-color: red;
width: 100px;
height: 100px;
position: relative;
left: 300px;
top: -220px;
}
.b:after {
content: '';
position: absolute;
left: -30px;
top: -30px;
width: 100%;
height: 100%;
border: solid 30px #233232;
border-bottom-color: red;
border-right-color: red;
}
demo
I have choose a red color for the demo, to make it more visible. But of course you can set that to whatever you want
I came across this page of a themed website that has form field labels with triangles on one side:
http://www.openblackbelt.com/app/index.php?action=profile
A triangle technique is a nice accent to break up the monotony of forms without the usual rounded border or some other getting-over-used approach.
The only problem is, I can't seem to actually determine how the triangular accenting is done. I don't see any use of :before or :after, and there is only one html element <label> involved as far as I can tell. Can anyone do a breakdown of how to perform this technique on my own?
It's nothing but a small div positioned relative containing absolute positioned div using CSS Triangles. I've made a demo from scratch, you can check this out.
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div span {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
If you want to save an element, you can use :after pseudo(won't work in IE), you can try this
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
content: " ";
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
No span tag required here.
Explanation: I am just using an absolute position element with a height and width set to 0 and am using borders around the element, making one a transparent, thus creating that triangle shape. And than I use right to position it correctly.
They do it by giving it a border-bottom:24px; and border-right:24px; by positioning the div absolute
#feitla is on the right path, #Kzqai specific what you asked for is achieved as below:
CSS:
.contact-form label {
border-right: 24px;
}
HTML:
<label for="openbb_username">Enter your email address</label>
I want to achieve something like this:
The width of the element is 100%. I will use only the centered corner and combine with border-top:
.element {
border-top: solid 1px #ccc ;
background: url('../images/arrow.png') no-repeat center top;
}
But the border stays inside the arrow. I tried up image background -1px to hide the border but it didn't work. How do I do this?
I solved it with an extra container:
HTML:
<div class="first"><div class="second"></div></div>
CSS:
.first {
border-bottom: 5px solid #000;
width:100px;
height:100px;
background-size: 20%;
background-position:50% 105%;
box-sizing: border-box;
}
.second {
width:100%;
height:104px;
background: url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcROusF7rh7H4mWpr8wQIllxWPAHHIShRyG62xp3qy2O4Av_NmNV) no-repeat;
background-size: 20%;
background-position:50% 100%;
}
jsfiddle: http://jsfiddle.net/AKpLT/
Interesting issue. Here's one contrived solution using the :before selector to absolute position the image over the border. See this jsfiddle for a working example. The relevant code is as follows:
div {
border: 1px solid red; /* For demo purposes it's red */
position: relative;
}
div:before {
content: url('http://i.stack.imgur.com/P3zMs.png');
position: absolute;
top: -1px;
width: 100%;
text-align: center;
line-height: 1px;
}
Here's a screenshot of the result:
Edit: the browser compatability for the :before selector tells us it's only supported in IE8 and higher. It's even worse though, because as far as I can tell the content: url(...) construct nor the background-image of a :before pseudo-element doesn't seem to work even in IE9. Fortunately, this should fall under graceful degredation...
If you're already creating the image just make the entire thing your background image in the shape you want it. Make it long enough so it can adjust to whatever reasonable length element you might want to put it in.
Like Mash I'd use another element for the background, but unlike Mask I'd use the CSS :before or :after pseudo elements:
<h2>Heading</h2>
h2 {
border-top: 1px solid #ccc;
position: relative;
}
h2:after {
background: url(IMAGE);
content: " ";
display: block;
width: WIDTH-OF-IMAGE;
height: HEIGHT-OF-IMAGE;
position: absolute;
left: 50%;
top: -1px;
margin-left: -WIDTH-OF-IMAGE/2;
}
I'm trying to place a nice border around an image that's 250x250, using only html and css. The markup is this:
<div id="img-container"><img src="pic.jpg" border="0"/></div>
And the css is:
#img-container {
height: 225px;
width: 225px;
padding: 3px;
border: 1px solid black;
z-index: 10;
position: relative;
overflow: hidden;
border-radius: 10px;
}
#img-container img {
z-index: 5;
}
Basically, I want the div container to clip the picture's edges that exceed its boundaries. This will achieve the rounded edges effect using the border-radius property (-moz-border-radius, -webkit-border-radius, etc) - if it actually works or could even be done. Looking for tips and tricks on this. Thanks.
And, yes, I'm obviously not a web designer :)
Yes it's possible, but you should set the image as the div background using CSS:
#img-container {
height: 225px;
width: 225px;
padding: 3px;
border: 1px solid black;
background-image: url('pic.jpg');
border-radius: 10px;
}
This is necessary, otherwise you will get horrible white borders around the image (tested in Google Chrome).
as far as I understood your question, deleting the
#img-container img {
z-index: 5;
}
part should do the trick.
Or you could use the image as a background image:
#img-container {
...
background: url(pic.jpg) no-repeat top left;
}