I have Problem With To Create a Parralax Cover
.divcover {
border: #cccccc solid 1px;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
min-height: 200px;
vertical-align: bottom;
border: none;
border-radius: 4px 4px 0 0;
margin-top: 20px;
/*margin-bottom: 20px;*/
}
.divCoverCover {
background-color: rgba(0,0,0,0.4);
border-radius: 4px 4px 0 0;
}
this style contain textshadow but this has a problem with bootstrap
please Help Me !
This Can be Help You
.divcover {
border: #cccccc solid 1px;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: multiply;
color: #fff;
text-shadow: 1px 1px 0px #bbb;
position: relative;
overflow: visible;
padding-right: 200px;
min-height: 200px;
vertical-align: bottom;
border: none;
border-radius: 4px 4px 0 0;
margin-top: 20px;
/*margin-bottom: 20px;*/
}
.divCoverCover {
background-color: rgba(0,0,0,0.4);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 4px 4px 0 0;
}
Related
i have this css code to add one arrow to my dropdown:
div {
&.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
&:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-bottom: 6px solid #cdd1da;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-color: transparent transparent #fff transparent;
border-width: 6px;
background: #cdd1da;
}
}
}
This is the result:
I would like to remove grey corner but keep grey border:
Thank you
I have created snippet according to requirement, Currently done with css, you can make scss or i will create a pen let me know. please check:
div.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
}
div:before {
content: '';
position: absolute;
bottom: 100%;
left: 26%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #cdd1da transparent;
border-width: 7px;
}
div:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 5px;
}
<div class="toggle-assessment-key-dropdown">
Item
</div>
I was experimenting some fancy CSS effects before apply to an ongoing application and I came across Ribbons.
By itself, it works perfectly but I wouldn't use a fixed element as suggested by the generator so I added an image to the main box
However, the images of the application in which I would be adding this feature are not of the same size yet, so I decided to change the old <img>for CSS background images and then make use of background-size property.
But sometimes the background image is overflowing the dimensions of box. It would be just a matter of add an overflow: hidden in #preview and everything would be solved, but if I do that the "curves" of the Ribbon disappear.
How could I change that? Here's the current test code, although for some reason the background is not loading, not in here nor in JSFiddle.
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
The image goes to .front because I also intend to use David Walsh's Card Fliping technique, which is already working in parallel and I believe is not relevant to the case.
Even setting background-size to containmade the image overflow, but this value is not desirable as it won't cover like the currentlt defined value.
.front is just a text container. you need to apply background image to #preview
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.front {
color: white;
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front">FRONT DIV Lorem ipsum la-la-la</div>
</div>
Or you need to define width and height for .front:
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
height: 260px;
width: 365px;
}
.ribbon {
position: absolute;
left: -8px; top: -8px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
I'm trying to create a tooltip that looks like this using CSS:
This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/
So, basically i'm using css3 masking:
div:after {
width: 61px;
height: 10px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 10px at 0px 0, transparent 0, transparent 10px, black 11px);
top: -10px;
right: 0px;
position: absolute;
content: '';
display: block;
}
Looks good on regular displays, but you can see the problem when you're viewing it on a retina display or when you're trying to zoom in:
Because i'm using a gradient as a mask, it looks a bit blurry when the color changes in the gradient. Its important to mention, that the rounded corner needs to be transparent, because the background is not fixed behind it.
Any idea how can i fix this issue?
You can do it with a box shadow:
.demo{
position: absolute;
left: 400px;
top: 106px;
background: #fff;
width: 200px;
height: 200px;
-moz-border-radius:10px 0 10px 10px;
-webkit-border-radius:10px 0 10px 10px;
border-radius:10px 0 10px 10px;
-moz-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 4px 20px rgba(0,0,0,.5);
box-shadow: 3px 4px 20px rgba(0,0,0,.5);
line-height:200px;
text-align:center;
color:#dbdbdb;
}
.demo:before {
content: '';
width: 50px;
position: absolute;
right: 0px;
top: -26px;
height: 16px;
background: #fff;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
display: block;
}
.demo:after {
width: 10px;
height: 10px;
background: transparent;
top: -10px;
right: 50px;
position: absolute;
content: '';
border-bottom-right-radius: 100%;
box-shadow: 50px 0px 0px 50px white;
clip: rect(0px, 60px, 50px, 0px);
display: block;
}
fiddle
website is tolitakeover.com ... i cant get the arrows to show on the slider they are partially there so it looks like theres something in the code that is covering it? not sure.. tried resizing the image didnt work.. also.. i havent attempted this yet but can someone tell me how to get the dots on the bottom to go the the left corner.. thanks
css for the slider only is..
/* Slider */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider a img { outline: none; border: none; }
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 90%;
display: block;
height: 50%;
margin:auto;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
.flexslider {
position: relative;
zoom: 1;
padding: 10px;
background: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}
.flex-container {
min-width: 150px;
width:100%;
margin-top:1%;
}
.flexslider .slides { zoom: 1; }
.flex-direction-nav a {
display: block;
position: absolute;
margin: -17px 0 0 0;
width: 35px;
height: 35px;
top: 50%;
cursor: pointer;
text-indent: -9999px;
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344),to
(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
}
.flex-direction-nav a:before {
display: block;
position: absolute;
content: '';
width: 9px;
height: 13px;
top: 11px;
left: 11px;
background: url('http://tolitakeover.com/images/arrows.png') no-repeat;
}
.flex-direction-nav a:after {
display: block;
position: absolute;
content: '';
width: 0;
height: 0;
top: 35px;
}
.flex-direction-nav .flex-next {
right: -5px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.flex-direction-nav .flex-prev {
left: -5px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
.flex-direction-nav .flex-next:after {
right: 0;
border-bottom: 5px solid transparent;
border-left: 5px solid #31611e;
}
.flex-direction-nav .flex-prev:after {
left: 0;
border-bottom: 5px solid transparent;
border-right: 5px solid #31611e;
}
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: -40px;
text-align: center;
margin: 0 0 0 -10px;
}
.flex-control-nav li {
display: inline-block;
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 \9;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
box-shadow: inset 0 0 0 2px #b6b6b6;
}
.flex-control-paging li a.flex-active {
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to
(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);
-webkit-box-shadow: none;
-moz-box-shadow: none;
You need to correct width, height and positioning properties. It would be simpler to separate the images for left and right arrows and correct the code for each. The code below fixes it.
media="screen"
.flex-direction-nav .flex-next::before {
background-position: -29px 0;
left: 0;
media="screen"
.flex-direction-nav a::before {
display: block;
position: absolute;
content: '';
width: 29px;
height: 30px;
top: 4px;
left: 4px;
background: url('http://tolitakeover.com/images/arrows.png') no-repeat;
z-index: 100;
I am trying to do something like this image below with CSS to build the buttons and then an image sprite to show the center content of the button.
Here is a demo of the code I have so far, I am having trouble getting my sprite images to position correctly. Any help to improve this CSS to look more like my image above would be great. I think the actual HTML structure could be improved as well?
http://dabblet.com/gist/2212456
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
Block & inline method
http://dabblet.com/gist/2213271
Absolute method
http://dabblet.com/gist/2213121
Hi you have not defined the position absolute in #left & #right so i controlled the sprite images through absolute positioned.
you can adjust your images through changes in position top,left,bottom,right whatever you need....
Here is your updated css :-
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
background-position: 16px -16px;
height: 15px;
left: 15px;
position: absolute;
top: 12px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
background-position: 0 -29px;
left: 15px;
position: absolute;
top: 13px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
or see the live demo:- http://dabblet.com/gist/2213048