i want to have design as exactly below by help of HTML 5 and CSS 3. Here is jsfiddle how i do it.
Here is the example codes
<div class="header">Akşam Sizin İçin Önerdiklerimiz
<div class="skew"></div>
</div>
<div class="line"></div>
.header {
color: white;
font-size: 14px;
display: inline-block;
padding: 5px 10px;
background-color: #6b6a69;
position: relative;
}
.skew {
position: absolute;
-moz-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
right: -14px;
display: inline-block;
width: 40px;
height: 30px;
top: 0;
background: inherit;
z-index: -1;
}
.line {
height: 11px;
background-color: #6b6a69;
margin-top: -7px;
}
As you have seen that i used 3 html element to build this. What i want to achieve is to give a gradient background-color for whole that design. But there are 3 different elements so i can only apply gradient for each element separately and that wouldn't look as i want.
So i am trying to achieve that design by only 1 element via CSS 3 features like transformations.
At least skewing only right side as in the picture via removing div.skew element would be an improvement for me.
If it is possible to do that so how can i do that ?
Edit: Here is example how it looks when i apply gradient so that is why i want to simply remove extra elements for applying gradient to whole design.
This would be an easier way to do it: http://codepen.io/pageaffairs/pen/aDoFc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.header {
color: white;
font-size: 14px;
padding: 0 0 20px 0;
background-color: #6b6a69;
position: relative;
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(180,187,193,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(180,187,193,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* W3C */
overflow: hidden;
}
span {position: relative; display: inline-block; padding: 5px 10px 0 10px;}
span:after {
content: " ";
width: 2000px;
height: 0;
position: absolute;
border-top: 20px solid white;
border-right: 0 solid transparent;
border-bottom: 0 solid transparent;
border-left: 20px solid transparent;
left: 100%;
top: 0;
}
</style>
</head>
<body>
<div class="header">
<span>Akşam Sizin İçin Önerdiklerimiz</span>
</div>
</body>
</html>
Related
I am having an issue with making my text responsive with the image its placed with, specifically in mobile view.
Here is how the module looks in desktop/tablet view:
And here is how it looks in mobile view:
The issue here is that I want the image boxes in mobile view to be center aligned. However, when I centre align the div with the images, the text is still placed on the left side, and not being responsive.
I am not entirely sure how to adjust my code to make the text responsive with the images, but here is the code that I have for these respective elements.
.cssHotelBox {
position: relative;
}
.pickgradient{
position:relative;
display:inline-block;
}
.pickgradient:after {
content:'';
position:absolute;
top:0;
margin-top: 99px;
left: 1px;
width:221px; height:50%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.70)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* W3C */
}
.cssHotelImage {
height: 160px;
width: 223px;
border: solid 1px #FFF;
margin-top: 40px;
}
.cssHotelText {
color: #FFF;
font-size: 14px !Important;
position: absolute;
top: 160px;
left: 8px;
}
.cssHotelCity {
color: #FFF;
font-family: inherit;
font-size: 11px !Important;
position: absolute;
top:180px;
font-weight: 100 !Important;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.starRating {
display:inline-block;
width:60px;
height:11px;
background:transparent url(../images/star-sprites.png) no-repeat scroll;
margin-left: 6px;
margin-right: 2px;
}
When I make .cssHotelBox have the text-align: center, this is how it shows up:
I would like the text to be responsive within the image after:
#media (max-width: 768px) {
}
Is there any way I can fix the issue with the text? Thanks.
You should wrap the image and the text within the same container
This is the code I currently have for this image
border-radius: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
-webkit-border-image: -webkit-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
border-image: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
border-image-slice: 10;
I am trying to round the border corners by using:
border-radius: 10px;
But that is not rounding the corners for me. Any help is appreciated. Thank you in advance.
you must use the div and image into div.
like this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div {
background: linear-gradient(#ff0000 0%, #b200ff 50%, #ff0000 100%);
padding: 10px;
display: inline-block;
border-radius: 20px;
}
img {
width: 500px;
border-radius: 20px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="FK8.jpg" />
</div>
</body>
</html>
best regards.
Border-radius and border-image are not the same; however, you can get this working with a ::after pseudo-element.
See updated fiddle: https://jsfiddle.net/2u44tqzy/1/
img {
position: relative;
border: 4px solid transparent;
border-radius: 10px;
background: linear-gradient(orange, violet);
background-clip: padding-box;
background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
/* just to show box-shadow still works fine */
box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
img::after{
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
content: '';
z-index: -1;
border-radius: 16px;
}
I was struggling with this just now. Was using as an image as a background for a <div> and border-radius simply refused to work. The <div> had two sections - left and right. The left section had an image as a background whereas the right had a simple bg-color. I applied an overflow:hidden to the <div> and voila!
For my online game UI, I decided to make Hill Climb Racing (Android Game)'s buttons. This is is what I have presently :
body {
color: white;
font-family: Impact, fantasy;
font-size: 40px;
line-height: 100px;
text-align: center;
}
.rect {
height: 100px;
width: 280px;
background: #545D60;
border-radius: 20px 50px 50px 20px;
position: relative;
}
.rect:before {
background: #545D60;
content: "";
position: absolute;
top: 6px;
left: 195px;
height: 0px;
width: 0px;
border-radius: 30px 10px;
border: 44px solid #545D60;
transform: rotate(45deg);
}
<div class="rect">NEXT</div>
The problem lies with aligning the gradient properly. A gradient background could be added to rect, but the same gradient doesn't align properly with the triangle on the right.
Solutions such as this one are helpful, but don't apply to what I am trying :
link
Also, can we create a responsive shape with gradient background?
Note : this is not a duplicate, its a completely different question.
EDIT
Also, on hover, the gradient becomes upside down, ie rotates 180 deg. This part I can create, but aligning the gradients of rect and before is still a problem.
Caution: This is not quite the way you had in mind to achieve this, but in my opinion this is probably the simplest way to achieve it without resorting to SVG or images or complex angle calculations in gradients. Rotating pseudo-elements etc will cause the other side to mismatch because you have a curved side on the right.
The shape is achieved by using two pseudo-elements which are about half the size of the parent (.rect), skewing them in opposite directions and then positioning them exactly one below the other. The other skewed side (left hand side) is hidden from view by positioning it inside the parent rectangle using the left property of the pseudo-elements.
The required gradient is assigned to both the parent and the pseudo-elements. For the parent the full gradient is applied as required whereas for the pseudo-elements it is split exactly in half between the the :before and :after elements to make it look as a gradual progression.
Since the :before and :after pseudo-elements are effectively children of the main element, a hover on them effectively means an hover on the parent also.
The span contains the text and is positioned with a higher z-index for it to be above the pseudo-elements and thereby be visible.
body {
color: white;
font-family: Impact, fantasy;
font-size: 40px;
line-height: 100px;
text-align: center;
}
.rect {
height: 100px;
width: 225px;
position: relative;
border-radius: 20px 0px 0px 20px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#949DA0), to(#545D60));
background: -webkit-linear-gradient(#949DA0, #545D60);
background: -moz-linear-gradient(#949DA0, #545D60);
background: -o-linear-gradient(#949DA0, #545D60);
background: linear-gradient(#949DA0, #545D60);
}
.rect span {
position: relative;
z-index: 2;
}
.rect:before {
background: #545D60;
content: "";
position: absolute;
top: 0px;
left: 42px;
height: 51%;
width: 100%;
border-radius: 0px 10px 6px 0px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#949DA0), to(#747D80));
background: -webkit-linear-gradient(#949DA0, #747D80);
background: -moz-linear-gradient(#949DA0, #747D80);
background: -o-linear-gradient(#949DA0, #747D80);
background: linear-gradient(#949DA0, #747D80);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.rect:after {
background: #545D60;
content: "";
position: absolute;
bottom: 0px;
left: 42px;
height: 51%;
width: 100%;
border-radius: 0px 6px 10px 0px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#747D80), to(#545D60));
background: -webkit-linear-gradient(#747D80, #545D60);
background: -moz-linear-gradient(#747D80, #545D60);
background: -o-linear-gradient(#747D80, #545D60);
background: linear-gradient(#747D80, #545D60);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.rect:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#545D60), to(#949DA0));
background: -webkit-linear-gradient(#545D60, #949DA0);
background: -moz-linear-gradient(#545D60, #949DA0);
background: -o-linear-gradient(#545D60, #949DA0);
background: linear-gradient(#545D60, #949DA0);
}
.rect:hover:before {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#545D60), to(#747D80));
background: -webkit-linear-gradient(#545D60, #747D80);
background: -moz-linear-gradient(#545D60, #747D80);
background: -o-linear-gradient(#545D60, #747D80);
background: linear-gradient(#545D60, #747D80);
}
.rect:hover:after {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#747D80), to(#949DA0));
background: -webkit-linear-gradient(#747D80, #949DA0);
background: -moz-linear-gradient(#747D80, #949DA0);
background: -o-linear-gradient(#747D80, #949DA0);
background: linear-gradient(#747D80, #949DA0);
}
<div class="rect"><span>NEXT</span>
</div>
I am designing a page, and run into a problem, I can not solve on my own. On zooming out, the items in the header are moving vertically, at 25%, the elements are in completely wrong position.
I am using block display, because i want the menu items to move to the center on zoomout(like on facebook, twitter or here), so inline and inline-block not solving my problem.
Same reason on relative positioning.
Is there another way to achive the same effect instead of relative positioning?
Any ideas how to make it right?
Cheers
Andrew
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen"> </style>
<title>Layout</title>
<link href="../Content/LAYOUT.css" rel="stylesheet" />
</head>
<body>
<div id="menucontainer">
<div id="wrapper">
<a href="HTTP://www.google.com" class="LC">
<p class="L"> </p>
</a>
<a href="http://www.idk.com" class="KC">
<p class="K">Új Kérdés</p>
</a>
<a href="http://www.idk.com" class="EC">
<p class="E">Új Értékelés</p>
</a>
<a href="http://www.idk.com" class="MessageC">
<p class="Message"> </p>
</a>
</div>
</div>
</body>
</html>
CSS:
body { background-color: lightgray;
margin:0 auto;}
#menucontainer {
position: fixed;
width: 100%;
min-height: 45px;
height: 20px;
background: #3f3f3f; /* Old browsers */
background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* IE10+ */
background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#33eb31',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
font-family: Corbel;
z-index: 2;
display: inline-block; }
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
z-index: -1;
white-space: nowrap;
height: 30px;
max-height: 30px;
display: block;
padding-top:9px;
padding-bottom:10px; }
.LC {
left: 0%;
min-width: 30px;
top: -20px;
max-width:30px;
width:30px;
display: block;
position:relative;
white-space:nowrap;
height:30px;
min-height:30px;
margin-right:20px;
margin-top:2px; }
.L {
background-image: url(/logo.png);
background-size: 30px 30px;
height: 30px;
width: 30px;
min-width: 30px;
max-width: 30px; }
.KC {
left: 7%;
top: -64px;
display: inline-block;
position: relative;
text-decoration: none;
width:90px;
min-width:90px;
white-space:nowrap;
height:30px; }
.K {
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
text-decoration:none; }
.K:link {
text-decoration: none; }
.K:visited {
text-decoration: none; }
.K:hover {
text-decoration: none;
color: #33eb31; }
.K:active {
color: white;
text-decoration: none; }
.EC {
left: 20%;
top: -105px;
display: block;
position: relative;
text-decoration: none;
width:110px;
min-width:110px;
white-space:nowrap;
height:30px; }
.E {
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
min-width: 30px; }
.E:link {
text-decoration: none;
}
.E:visited {
text-decoration: none;
}
.E:hover {
text-decoration: none;
color: #33eb31;
}
.E:active {
color: white;
text-decoration: none;
}
I think you might be over complicating this a little bit. you shouldn't need to use position:absolute;. You should use ul li elements for your menu instead. You can set #wrapper to the size of your page and use margin:0px auto to center it.
Let me know if this looks like what you're trying to do: http://jsfiddle.net/gxwxk3zv/
I have a menu where I want to have an active state and a hover state of the menu items. My problem is illustrated best in the two images. The green background color should only cover the dark orange area (Which is an image).
This is my menu now:
And this is how I want it to be:
Which way is best to cut the bottom of the green element to get this effect?
My code so far in JSFIDDLE:
http://jsfiddle.net/HC5qC/
CSS:
nav ul {
padding: 0;
list-style-type: none;
position: absolute;
right: 96px;
top: 37px;
}
nav li {
float: left;
}
nav a {
text-decoration: none;
font-weight: 400;
font-size: .9375em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
padding: 54px 15px 65px 15px;
overflow: hidden;
}
.current-menu-item a,
.current-menu-item a:hover {
background: #79bd8f; /* Old browsers */
background: -moz-linear-gradient(top, #79bd8f 30%, #00a388 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#79bd8f), color-stop(99%,#00a388)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* IE10+ */
background: linear-gradient(to bottom, #79bd8f 30%,#00a388 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bd8f', endColorstr='#00a388',GradientType=0 ); /* IE6-9 */
}
nav a:hover {
background: #6b1600;
background: rgba(107, 22, 0, 0.2);
}
I wonder if something like this FIDDLE might get you started.
I'll play around with it a bit more, to see how close we might get to what you want.
But the concept is to put an :after or :before, or an absolutely positioned "overlay" and be able to click to boxes behind.
CSS
.selector {
width: 295px;
height: 100px;
overflow: hidden;
background-color: transparent;
position: relative;
}
.button1 {
float: left;
width: 32%;
height: 100%;
border: 1px solid white;
background-color: blue;
}
.selector:after {
content: '';
width: 300px;
height: 30px;
position: absolute;
top: 85px;
left: 0px;
transform: rotate(-3deg);
background-color: red;
}