Related
When I try to image gallery on trial website using CSS grid, images overlay one another to such extent that is a pain to see.
I tried to check classes and how they interact and everything should be ok. When I delete code of CSS grid, everything starts looking normal, although the sizes of the images are different.
Before:
After:
I would like to make them symmetrical, but don't know what to do. Perhaps, there is an error in managing the sizes of images themselves? But when I tried to make them with the same width and height, nothing changes.
Thank you for help in advance and if there are some inconveniences in post, let me know so I wont do the same mistake in the future.
Code:
body {
margin: auto 0px;
}
.zone {
cursor: pointer;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*Navigation cosumize*/
.navigation {
display: flex;
list-style: none;
font-size: 1em;
margin: 0px;
}
#media only screen and (max-width: 600px) {
.navigation {
font-size: 0.5em;
padding: 0;
}
}
.end {
margin-left: auto;
}
li {
padding: 10px;
}
a {
color: white;
text-decoration: none;
}
/*Cover*/
.red {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
/*Project's grid*/
.for-grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
img {
width: 100%
}
.box {
background-color: #444;
padding: 100px;
margin: 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="zone green">
<ul class="navigation">
<li>
About
</li>
<li>
Products
</li>
<li>
Our team
</li>
<li class="end">
Contact
</li>
</ul>
</nav>
<div class="zone red">Cover</div>
<div class="zone blue for-grid">
<img class="box zone" src="https://i.ibb.co/qWr3CYq/data-storage-2-2.png">
<img class="box zone" src="https://i.ibb.co/fGcNpN7/desktop-analytics-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/mtXHQ8C/files-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/wyCktLv/monitor-coding-2.png">
<img class="box zone" src="https://i.ibb.co/M9Qkn6G/monitor-settings-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/k0VNnBN/server-2-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/HKHcrdH/server-3.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/b7s4NPN/server-safe-2.png" alt="product image">
</div>
<div class="zone yellow">Footer</div>
</body>
</html>
css
.box {
box-sizing: border-box;
}
Here is some information about the box model that will help you understand why this might work
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
I've got a div which has a 65% width of the body and inside of it I've got a table and I want it to have same width as the parent div. The problem is that when I set the table width to 100% it seems to be 1px narrower than the parent div on some of the screen resolutions. (For example when the browser window is maximized - table is 1px too narrow. When I resize the browser window sometimes the table width is correct but sometimes it has this 1px bug)
I managed to get rid of this bug by setting the table width to 100.01%, but this solution is quite rude and I want to know if there's any other way or any explanation why this happens.
#edit:
Here is the css of the parent div:
#content {
width: 65%;
min-width: 800px;
background: #666;
padding-bottom: 20px;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
background: #666666; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #666666 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#444444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#444444 100%); /* IE10+ */
background: linear-gradient(to bottom, #666666 0%,#444444 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-8 */
-webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 1);
}
And the table:
#usertable {
background: rgb(34,34,34); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(34,34,34,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,34,34,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(34,34,34,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(34,34,34,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(34,34,34,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(34,34,34,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
margin: 0px;
margin-bottom: 30px;
border-collapse: collapse;
width: 100%;
}
#usertable td {
border: 2px solid #666;
padding-top: 6px;
padding-bottom: 6px;
}
#usertable tr td:first-child {
border-left: 0px;
}
#usertable tr td:last-child {
border-right: 0px;
}
Tried box-sizing already, didn't work
This used to work fine, however recently the gradient doesn't work properly in Webkit. Seems to be fine in Firefox. Can someone check if I'm setting something incorrectly. Don't pay attention to the images. Its the gradient I can't get to render. Any ideas please?
JSFIDDLE: http://jsfiddle.net/UdxUg/2/
-webkit-gradient
It's due to the old syntax, generally webkit/blink now allows using a vendor-less value.
Generally you should use a :pseudo-element --> http://jsfiddle.net/UdxUg/6/
anyways here's a code that works.
works with image
.create {
border: 1px solid #63ac5c;
background: #d9ead8 url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px;
background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbe8d9), color-stop(100%, #bcd7b9));
/* Safari 4+, Chrome 2+ */
background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -moz-linear-gradient(top, #dbe8d9, #bcd7b9);
background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -webkit-linear-gradient(top, #dbe8d9, #bcd7b9);
background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, linear-gradient(top, #dbe8d9, #bcd7b9);
height: 23px;
text-align:center;
}
use this instead though
.create {
border: 1px solid #63ac5c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbe8d9), color-stop(100%, #bcd7b9)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(top, #dbe8d9, #bcd7b9);
background: -moz-linear-gradient(top, #dbe8d9, #bcd7b9);
background: linear-gradient(top, #dbe8d9, #bcd7b9);
height: 23px;
text-align:center;
position: relative
}
.create:before {
content: '';
background: #d9ead8 url('http://tinyurl.com/mezxsk6') no-repeat 0 0;
height: 23px;
width: 23px;
position: absolute;
top: 0;
left: 0;
}
Check this I always use this generator to generate gradients, it is faster and it is good.
CSS3 Ultimate Gradient Generator
BTW if you remove that images the gradient works just fine in webkit.
Check on jsFiddle
.create {
border: 1px solid #63ac5c;
background: rgb(188,215,185); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyNCUiIHN0b3AtY29sb3I9IiNiY2Q3YjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiNkYmU4ZDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(188,215,185,1) 24%, rgba(219,232,217,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,rgba(188,215,185,1)), color-stop(99%,rgba(219,232,217,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(188,215,185,1) 24%,rgba(219,232,217,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcd7b9', endColorstr='#dbe8d9',GradientType=0 ); /* IE6-8 */
height: 23px;
text-align:center;
}
I would like to create this shape using just css. I am pretty sure this can be done. But i am having trouble with gradients involved.
This shape will contain some text inside. Suggested html markup is:
<div class="container">
... more html contents...
</div>
A jsFiddle would be highly appreciated.
Thanks in advance.
Try this, http://jsfiddle.net/HshfF/1/
CSS: (From the fiddle in this comment)
.main {
background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C */
position: relative;
width: 150px;
height: 100px;
margin: 10px;
border: 1px solid #d0d0d0;
border-radius: 10px;
padding: 20px;
}
.main:before {
content: '';
display: block;
top: -1px;
right: -1px;
width: 20px;
height: 20px;
background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C */
position: absolute;
border-radius: 0 0 0 5px;
border-left: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
.main:after {
content: '';
display: block;
position: absolute;
top: -1px;
right: -1px;
border-top: 20px solid #fff;
border-left: 20px solid transparent;
}
Please Learn CSS3, Try Nicholas Gallagher tutorials, he has some of the best css3 tutorials:
one you looking for http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
The drop shadow and colors you looking for i think you need to do it yourself.
Nearly there with this: http://jsfiddle.net/Grezzo/52zG7/
You only need one div (thanks to pseudo element), but I haven't "cut" the corner yet.
Please see this fiddle:
jsfiddle example
notice the headers are cutting off the border-radius, any ideas why?
Thanks
The gradients of the .pod-headers are overlapping the round corners on the .pods because you didn't round the .pod-headers. They don't inherit the round corners from their parent elements.
To fix it, round the top corners (only) of your .pod-header elements using this CSS:
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
You are giving one class the border radius and the inner class the background but no radius (so it still has a square corner).
Check out the CSS in the updated fiddle
You also need to set the border-radius on the inner div.
For example Use this:
#pod-container .pod .pod-header {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
border-radius: 6px;
border-bottom: 1px solid #CCC;
}