Is it possible to create a header div that is sheared/oblique like in the image below?
Its for a mobile website
Yes, this is possible: DEMO
.wrapper {
overflow:hidden;
height:300px;
width:100%;
background: url(http://placekitten.com/g/300/300);
position:relative;
}
.top {
background:gray;
height:60%;
width:130%;
position:absolute;
top:-30%;
left:-5%;
transform:rotate(5deg);
border-bottom:10px solid white;
}
.text{
position:absolute;
top:20px;
right:10%;
padding:10px;
border-radius:10px;
border:5px solid white;
transition:all 0.8s;
}
.text:hover{
box-shadow:0 0 10px white;
}
<div class="wrapper">
<div class="top"></div>
<div class="text">MENU</div>
</div>
Related
I am trying to make a mini grid post layout using css. But i have a problem with divs. I have try it in this demo page. And I do not get the shape I want. I want to make it like the screenshot
I try it like this CSS codes:
.div {
position:relative;
float:left;
width:100%;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.div:nth-child(1){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(3){
width:400px;
padding-top:400px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(4){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(5){
width:365px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(6){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
HTML
<div class="container">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
How can i get the screenshot within css ? Anyone can help me here ?
You can use a lot of solutions:
Solution one:
Use the new column-count. DEMO.
Check the browser compatibility.
Solution two:
Use display:inline-block;. DEMO.
Check the browser compatibility.
Solution three:
Using flexbox. DEMO.
Check the browser compatibility.
Solution four:
Use JQuery, I suggest you the Masonry plugin (usually used for galleries) . DEMO.
I am not sure if this is what you are looking for, i had to restructure your html to achive that here is the link:http://codepen.io/saa93/pen/ENjNgy
<style>
body,html {
padding:0px;
margin:0px;
width:100%;
height:100%;
}
.container {
position:relative;
width:100%;
max-width:1010px;
min-height:400px;
margin:0px auto;
}
.div {
position:relative;
float:left;
width:100%;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.div:nth-child(1) {
background: transparent none repeat scroll 0 0;
float: left;
width: 370px;
}
.div:nth-child(3){
width:180px;
float:left;
}
.div:nth-child(1) > .div:nth-child(1){
background-color:#1d1f20;
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(3) {
margin-bottom: 5px;
margin-right: 5px;
padding-top: 185px;
width: 365px;
}
.div:nth-child(2) {
margin-bottom: 5px;
margin-right: 5px;
padding-top: 370px;
width: 400px;
}
.div:nth-child(3) > .div:nth-child(1){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(3) {
float: left;
width: 180px;
}
.div:nth-child(3) > .div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
</style>
<div class="container">
<div class="div">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
<div class="div"></div>
<div class="div">
<div class="div"></div>
<div class="div"></div>
</div>
</div>
I hope this helps :)
I've made a "triangle" using CSS using the code outlined HERE
(jsFiddle example)
It works great, but I would like to have an inset shadow on the triangle and bar like this:
How?
HTML:
<div id="wrapper">
<div class="triLeft"></div>
<div class="triAngle"></div>
</div>
CSS:
.triLeft{
width:40px;
background:#fff;
margin:0;
float:left;
height:200px;
}
.triAngle{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px;
border-color: transparent transparent transparent #ffffff;
float:left;
margin-top:20px;
}
#wrapper{
height:200px;
background:brown;
}
you could try it another way, without borders but transform:rotate();
http://codepen.io/anon/pen/MymQMK
div.trgl {
position:relative;
margin:2em;
overflow:hidden;
}
div.trgl:after {
content:'';
position:absolute;
height:40px;
width:40px;
top:2em;
left:-20px;
background:white;
box-shadow: inset 0 0 5px black ;
transform:rotate(45deg);
}
div.trgl div{
position:relative;
min-height:200px;
padding:1em;
box-shadow: 0 0 5px black;
margin:3px;
background:lightgray;
}
<div class="trgl">
<div>
</div>
</div>
If you go to Google Play Store Website,you will notice that the width of the SearchBar at the top changes if you change the window width.
Can someone please give me an example on how I can achieve such variable width behaviour using just HTML and CSS?
CSS
body {
margin:0;
min-width:960px;
}
#upperbar {
background-color:#F1F1F1;
white-space:nowrap;
height:60px;
width:100%;
}
#logobardiv {
margin:10px 20px 10px 30px;
display:inline-block;
}
#logo {
height:39px;
width:183px;
}
#searchbardiv {
font-size:0;
display:inline-block;
height:100%;
padding-left:10px;
vertical-align:middle;
white-space:nowrap;
min-width:200px;
}
#searchbar {
height:28px;
/*max-width:589px;*/
max-width:100%;
width:589px;
min-width:545px;
font-size:16px;
border:1px solid #A8A8A8;
border-right:none;
display:inline-block;
vertical-align:middle;
}
#searchbar:hover {
border:1px solid black;
border-right:none;
}
::-webkit-input-placeholder {
color:#A9A9A9;
padding:0 0 0 7px;
}
#searchbutton {
vertical-align:middle;
background:#4584F0;
height:28px;
width:60px;
display:inline-block;
border:1px solid transparent;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
padding:0;
margin:0;
outline:none;
white-space:nowrap;
}
#searchbuttonimg {
vertical-align:middle;
background:url(images/search.png) no-repeat center;
display:inline-block;
height:100%;
width:26px;
}
#signindiv {
display:inline-block;
height:100%;
white-space:nowrap;
vertical-align:middle;
}
#appsimg {
display:inline-block;
vertical-align:middle;
}
HTML
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
<button id="searchbutton"> <span id="searchbuttonimg"></span>
</button>
</div>
<div id="signindiv">
<img id="appsimg" src="images/apps.png" />
</div>
</div>
</div>
JSFiddle
simple way is you need to set a 3 different width max-width, min-widtht and actual width
like
input{
max-width:100%;
min-width:300px;
width:800px;
}
I used display:flex to achieve the variable length of the elements.
Refer the below link for a good explanation
FlexBox
I tried to create a circle which border should look same color as div color and a space between the border and div. The in between space should show the background color of what ever div it is on. the background color is changeable so we shouldn't hardcode it.
Instead i have given transparency using rgba mode. All work fine am trying to get this effect on hover of the circle but i couldn't able to get the hover because i'm trying to display:block on hover and in normal state it is display:none; This are for the after selector hence i tried this effect with after selector.
CODE
CSS
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover + .main:after{
display:block;
}
.main:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:3px;
left:3px;
display:none;
}
body{
background-color:#888;
}
HTML
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
PROBLEM STATE
ON HOVER it should become like THIS with effects if possible
If there is any tutorial to do this i'll happy to learn. Thanks
set position:relative; to the .main and set left/right/top/bottom of the .main:after to zero and add transition:all ease 0.3s for animating.
in the .main:hover:after change left/right/top/bottom to -5px.
demo
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
position:relative;
margin:6px;
}
.main:after{
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:0px;
left:0;
bottom:0;
right:0;
transition:all ease 0.3s;
}
.main:hover:after{
top:-5px;
bottom:-5px;
right:-5px;
left:-5px;
}
Just add .main:hover:after to display it as block on hover WORKING FIDDLE
.main:hover:after{
display:block;
}
Try something like this
CSS :
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:111;
top:3px;
left:3px;
}
body{
background-color:#888;
}
HTML :
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
FIDDLE
you could use box-shadow instead pseudo-element :
http://jsfiddle.net/Ku6BQ/24/
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover {
box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff;
}
body {
background-color:#888;
}
If you it it transparent and show behind a gradient or an image, you may still use box-shadow : http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/
.main {
width:80px;
height:80px;
border-radius:100%;
box-shadow:inset 0 0 0 100px #007eff;
text-align:center;
line-height:80px;
}
.main:hover {
border:4px transparent solid;
margin:-4px;
box-shadow: 0 0 0 2px #007eff,
inset 0 0 0 100px #007eff;;
}
html {
background :#888 url(http://lorempixel.com/200/200/nature) repeat;
height:100%;
}
An improvement (just for the record) on he idea of a box shadow as apported by GCyrillus
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
border: solid 4px transparent;
background-clip: padding-box;
box-shadow: 0 0 0 0px white;
-webkit-transition: all 1s;
transition: all 1s;
}
.main:hover {
box-shadow: 0 0 0 6px #007eff;
}
body {
background-color:#888;
}
fiddle
<div class="card">
<img class='sound' src='https://www.google.com/images/srpr/logo4w.png'>
<div class='txt'>
this is a sentence.this is a sentencethis is a sentence.
</div></div>
.card{
margin:5px 14px;
border:thin solid blue;
}
.sound{
width:32px;
height:32px;
cursor:pointer;
}
.txt{
display:inline-block;
margin-left:25px;
vertical-align:middle; //doesn't work
border:thin solid red;
}
How can I align .txt div to be on the middle of .sound image ?
fiddle is here
Put vertical-align on .sound?
.card{
margin:5px 14px;
border:thin solid blue;
}
.sound{
width:32px;
height:32px;
cursor:pointer;
vertical-align:middle;
}
.txt{
display:inline-block;
margin-left:25px;
border:thin solid red;
}
http://jsfiddle.net/hWejY/1/
Insert vertical-align: middle into class sound
.card{
margin:5px 14px;
border:thin solid blue;
}
.sound{
width:32px;
height:32px;
cursor:pointer;
vertical-align:middle
}
.txt{
display:inline-block;
margin-left:25px;
vertical-align:middle;
border:thin solid red;
}
DEMO
vertical-align:middle;
Should be on .sound