I want to reach this result:
This is what i have atm: http://mijnwebsitebestellen.be/index.php
So i am currently using SVG elements to slice of the images. You can inspect the code in your browser. I can't get the result right because of z-index issues.
Any tips or examples of any sort are appreciated.
You can achieve the same result using pure CSS.
Use a container element for background color and image
Use the pseudo element ::after with a white right border to imitate the right edge
Use some divs of the same class .tile to imitate the stripes with transform: skewX(-10deg); and let them float: right;
Et voilà:
.container {
height: 300px;
width: 400px;
background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.stack.imgur.com/e11Va.jpg);
background-size: cover;
color: white;
position: relative;
padding-right: 26px;
}
.container::after {
content: "";
position: absolute;
display: block;
right: 0;
bottom: 0;
height: 0;
width: 0;
border: none;
border-left: none;
border-right: 52px solid white;
border-top: 300px solid transparent;
border-bottom: none;
}
.tile {
width: 30px;
height: inherit;
background: rgba(0, 0, 0, 0.6);
border-left: 5px solid white;
transform: skewX(-10deg);
float: right;
}
<div class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
Of course you can add content to the container. Just use another div inside the container and give it the apropriate width.
Related
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
box shadows are basically your shape blurred.
that means that at the edges the shadow is curved up.
what if you don't want that? what if your shadow is for a top bar and you don't want it to seems like it ends?
issue:
desired effect :
how do I obtain this?
html :
<div class="TopBar"> </div>
css :
.TopBar {
box-shadow: 0 4px 28px black;
}
Am I supposed to use an absolute positioned element that's bigger than screen width or something?
You can add a spread parameter to the shadow (not exactly the same appearance, but at least it does what you ask for):
html,
body {
margin: 0;
}
.TopBar {
height: 40px;
background: #444;
box-shadow: 0px 4px 24px 16px black;
}
<div class="TopBar"></div>
Fake it! You can use linear gradient and a pseudo element to get the effect you want:
.TopBar {
height: 50px;
background: gray;
position: relative;
}
.TopBar::after {
content: "";
background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);
position: absolute;
width: 100%;
height: 20px;
top: 100%;
}
<div class="TopBar"> </div>
You can add a pseudo-element (:before) to extend it beyond your original container and therefore, get a wider shadow :
html, body { margin:0; padding: 0 }
.TopBar {
height: 50px;
position: relative;
}
.TopBar:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
background: #454545;
box-shadow: 0 4px 28px #000;
transform: scaleX(1.1);
z-index: -1;
}
.TopBar .content {
color: #add8e6;
}
<div class="TopBar">
<div class="content">Here's some text inside my top bar</div>
</div>
I need your help. Does anyone know a way of making a Parent's Div height size relative to its child divs.
If I define an auto height to the DIV #layout then the div resizes to 100% of my page window. However, If I define the height on the #layout div then I need to account for every pixel used on the screen in order to keep my border nice and clean around the layout div. How can I make the height on the #layout div box re-size to its contents?
Below is picture of the problem. As you can see the #box6 breaks the #layout div.
Maybe I am missing something that I have overlooked but I am not sure where to begin.
Here is the HTML and CSS in question:
* {
font-family: Segoe UI;
font-size: 9pt;
}
html,
body {
padding: 0;
margin: 0;
}
body {
background: rgb(187, 195, 203);
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#layout {
width: 900px;
height: 400px;
border: 1px solid rgb(112, 112, 112);
}
#box1 {
background: rgb(141, 155, 169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240, 240, 240);
border-bottom: 1px solid rgb(180, 180, 180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180, 180, 180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180, 180, 180);
}
#box5 {
background: rgb(240, 240, 240);
height: 375px;
}
#box6 {
width: 100%;
height: 100px;
background: blue;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn">Some text in here later</div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<ul>
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5"></div>
</div>
<div id="box6"></div>
</div>
instead of positioning with absolute, change it to margin: auto with a set width, that way the height will be dependent on the elements inside and the border will adjust with the container. See fiddle https://jsfiddle.net/z5hf5qwf/
CSS
.Absolute-Center {
margin: auto;
}
#layout {
width: 900px;
margin-top: 5%;
margin-bottom: 5%;
background-color: red;
border: 1px solid red;
}
I want to style an html div to be like a rocket, I mean it should represented as an oblong with a triangle edge. Just like this screenshot:-
A pure CSS solution could make use of the :after pseudoselector and abusing borders to make triangles. This site will even generate the code for you:
http://cssarrowplease.com/
Set the position to right and the size to be the height of the div.
Here's a tutorial that explains how to create a few variations of breadcrumb navigation in pure CSS3.
The final result looks like this:
Here's a working demo.
You actually can do triangles with pure CSS: http://css-tricks.com/snippets/css/css-triangle/
http://jsfiddle.net/C9PJ2/
Here is what you can sort of do using css, kind fo a hack of an arrow.
.arrow_box {
position: relative;
background: #2ad517;
border: 4px solid #12f50a;
top: 100px;
width: 240px;
height: 180px
}
.arrow_box:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(42, 213, 23, 0);
border-left-color: #2ad517;
border-width: 90px;
top: 50%;
margin-top: -90px;
}
.arrow_box:before {
border-color: rgba(18, 245, 10, 0);
border-left-color: #12f50a;
border-width: 96px;
top: 50%;
margin-top: -96px;
}
http://jsfiddle.net/9E9uP/
something for you to start with
Hope this helps:
http://jsfiddle.net/A2KzR/
HTML:
<div id="global">
<div id="normal" >Content</div>
<div id="triangle-right" />
</div>
CSS:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
left: 50px;
position: relative;
}
#normal {
width: 50px;
height: 100px;
background-color: red;
float:left;
}
#global {
width: 800px;
}
more info
http://css-tricks.com/examples/ShapesOfCSS/
Is there a possiblility to bring a html element to front without increasing it's z-index? All elements having the same z-index overlap depending on there order in the DOM. I could remove the element and append it to it's parent again - but is there any nicer solution?
Edit:
Keeping an array of all rects, set all rect's z-index to x and the just hovered to x+1 does the trick, but needs an array.
It would probably work if you wrote your HTML code from bottom positioning to top, since the browser reads the code from the top of the file to the bottom. Still, using z-index is a lot safer and more efficient.
try following code:
strong {
font-family: sans-serif;
}
div {
padding: 10px;
border: 1px dashed;
text-align: center;
}
.DivStatic {
position: static;
height: 80px;
background-color: #ffc;
border-color: #996;
}
.DivAbsolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #fdd;
border-color: #900;
opacity: 0.7;
}
.DivRelative {
position: relative;
height: 80px;
background-color: #cfc;
border-color: #696;
opacity: 0.7;
}
#Main1 {
top: 10px;
left: 10px;
}
#Main2 {
top: 30px;
margin: 0px 50px 0px 50px;
}
#Main3 {
top: 15px;
left: 20px;
margin: 0px 50px 0px 50px;
}
#Main4 {
top: 10px;
right: 10px;
}
#Main5 {
background-color: #ffc;
margin: 0px 50px 0px 50px;
}
<div id="Main1" class="DivAbsolute">
<strong>First DIV #1</strong><br />position: absolute;</div>
<div id="Main2" class="DivRelative">
<strong>Second DIV #2</strong><br />position: relative;</div>
<div id="Main3" class="DivRelative">
<strong>Third DIV #3</strong><br />position: relative;</div>
<div id="Main4" class="DivAbsolute">
<strong>Fourth DIV #4</strong><br />position: absolute;</div>
<div id="Main5" class="DivStatic">
<strong>Fifth DIV #5</strong><br />position: static;</div>