I'm going crazy here, have tried almost everything (including the things mentioned in the two other older threads about this topic). I simply want to add images instead of the arrows.
Here is my code:
.fp-controlArrow {
position: absolute;
width: auto;
height: 200px;
z-index: 4;
top: 50%;
cursor: pointer;
}
.fp-controlArrow.fp-prev {
left: 15px;
background: url(../images/left.png) no-repeat;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff;
}
Anybody who have got this to work? This should be easy but it isn't...
Related
I have a button class styled in css, in which background image is used, like this:
.button {
display: block;
background-position: center;
background-size: 30px 28px;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
width: 100%;
background-image: url('foo.png');
}
The shape in .png is really simple - it's just an orange circle. So I want to draw it in css instead, to avoid using external asset. So I thought of using the following css object (which draws an orange circle):
#circle {
width: 100px;
height: 100px;
background: orange;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Is there some way to use that in such a way, that it would behave exactly as the background-image .png? (I know I could just make another button class in which I would have drawn the button differently but I want to reuse the button class already available).
This can be achieved using a pseudo element, I made a fiddle. You can play with the dimensions of course.
.button {
display: block;
border: 0;
width: 300px;
height: 200px;
position: relative;
background: transparent;
/* just to show where the button is */
border:1px solid #000;
}
.button:before {
content: '';
display: block;
background: orange;
border-radius: 50%;
height: 100px;
width: 100px;
/* make sure background is behind text */
z-index: -1;
/* center circle in button, negative margins = half of circle dimensions */
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
How about using SVG in a data URI? Here's a fiddle showing the example and the code used to generate it (the link is just 194 characters long):
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28">'
+ '<ellipse cx="15" cy="14" rx="15" ry="14" fill="orange"/></svg>';
location.href = 'data:image/svg+xml;base64,' + btoa(svg);
Is it possible to make this shape with CSS? It can't be done with border radius, is there another way to 'bend' a rectangles sides?
As the other answers, the best way to make your shape perfect is using SVG. However with css3 and the help of pseudolements after and before You may have close shapes.
This one is far from good as I've made the FIDDLE as a fast example but with time you may get better results:
div {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: green;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
div:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
div:after {
content: '';
position: absolute;
bottom: 0px;
right: -11px;
width: 130px;
height: 120px;
background: green;
border-radius: 20% / 150%;
}
I don't think there's any widespread method for constructing shapes like that with pure css.
What you could try though is using inline svg:
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
This is just an example svg, you'll have to model your own. It also accepts base 64:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTM2NiwzMTAgTDU2NiwxNjAgNDY2LDExMCAxNjYsNjAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0zNjYsMzEwIEw1NjYsMTYwIDQ2NiwxMTAgMTY2LDYwIHoiICAvPgo8L3N2Zz4=) no-repeat;
Edit: I created a fiddle: https://jsfiddle.net/pm3czdhj/7/
You could also try looking into the css property clip-path.
Do some CSS like this will make the rectangle have curved edges:
div {
border: 2px solid;
border-radius: 25px;
}
The Kendo Splitter has a collapsible property that I want to use. However, the icon is a very small arrow that isn't intuitive at all, the users can barely see it. Even when they know it's there, the icon is so small that clicking it takes some time as hovering such a tiny icon is not that fast.
I want to make it bigger. I managed to enlarge the divider itself
.k-splitbar.k-splitbar-horizontal{
width: 20px;
}
but not the small icon.
I found this post from a user with the exact same issue as me but the solutions there don't work and the user hasn't given any feedback on them.
As stated you can ovveride the rules and here is the description of all the rules for a flat theme
.k-splitbar-horizontal .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -330px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-resize-handle {
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -360px -573px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -331px -454px;
width: 20px; height: 20px;}
.k-splitbar-horizontal-hover > .k-icon.k-expand-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -389px;
width: 20px; height: 20px;
}
.k-splitbar-horizontal-hover > .k-icon.k-collapse-prev{
background: url('/Content/css/Libs/KendoUI/Flat/sprite_2x.png') -361px -454px;
width: 20px; height: 20px;
}
.k-splitbar.k-splitbar-horizontal{
width: 15px;}
I know 5 years is too late but if someone is struggling with this, here is my solution in SASS.
.k-splitbar{
.k-i-arrow-60-left, .k-i-arrow-60-right{
z-index: 100000;
position: relative;
background: #ccc;
border-radius: 0 10px 10px 0;
bottom: -32px;
left: 20px;
width: 34px;
height: 30px;
font-size: 30px;
}
}
This works for horizontal panes, you can follow similar strategy for vertical ones.
In a CSS file for a script I bought I am seeing three lines that have me somewhat worried:
.h5video .control-panel { height: 45px; width:100%; line-height: 45px; bottom: 0px; left: 0px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAYAAABvewHEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEdJREFUeNpiYGBg2Mzg6+v7iunu3bt/mIBcBqb///8jE//+/cPOJZaFkwDbxggEIOI/iGCAE4wQFhAw4GIxYZWFcSEGAAQYAB5zRmw2StEiAAAAAElFTkSuQmCC") repeat-x scroll 0 0 transparent; position: absolute; }
.h5video .control-panel .seek-bar-guage { height: 7px; background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAAAAAAdccqdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUCB1j+M/0g+kr02emj0D4mekrAD41B7hJ9Jz5AAAAAElFTkSuQmCC") repeat-x scroll 0 0 transparent/* #C9DD1A */; width: 0%; left: 0px; z-index: 2; position: absolute; z-index: 0; }
.h5video .control-panel .seek-bar-buffer { height: 7px; width: 0px; top:0px; left: 0px; position: absolute; z-index: 0; background: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpiyMrKYvrz5w/Tr1+/wPjnz59w/Pv3b4AAAwBFtxXP00sbFwAAAABJRU5ErkJggg==); }
These all show Base64 in the coding and I'm trying to figure out what it actually should be showing there. Can anyone help with this?
What you are seeing are base64 encoded images. You can decode them and have them written to files with a .png extension to see their contents. The advantage of base64 encoded images within the CSS is that they can reduce the number of requests that the browser has to make to the web server for loading a page.
I am trying to figure out how to implement background crop like this in Compass sprite:
http://nicolasgallagher.com/css-background-image-hacks/
http://jsfiddle.net/blineberry/BhbrL/
This is what I have in .sass file:
#import "buttons/*.png"
#include all-buttons-sprites
.buttons-arrow
background-image: none
width: 30px
height: 45px
.buttons-arrow:before
+buttons-sprites(arrow)
display: block
content: ""
width: 15px
height: 27px
As you see, I tried to make .buttons-arrow without the background image first and then I added back the background-image. However, it gave me this .css file:
.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat;
}
.buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow {
background-image: none;
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
display: block;
content: "";
width: 15px;
height: 27px;
}
.buttons-arrow:before .buttons-arrow {
background-position: 0 0;
}
.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
background-position: 0 -27px;
}
.buttons-arrow:hover {
background-color: #ea4800;
}
Obviously it was wrong because it combined into this .buttons-arrow:before .buttons-arrow
I just want a simple result like this
.buttons-arrow {
width: 30px;
height: 45px;
margin-left: 150px;
}
.buttons-arrow:before {
background-image: url('../images/buttons-s5ae2b3a1e9.png');
display: block;
content: "";
height: 27px;
width: 15px;
How do I code this in Compass using sprite?
Since this place is pretty much dead, I do will a favor for people searching this from Google. The answer is:
Put this on top:
$buttons: sprite-map("buttons/*.png")
I have arrow.png and arrow_hover.png in there. The idea is to use sprite-map functions instead of #import all. Then make sure to include background image for the :before pseudo element but not original content:
.buttons-arrow
width: 50px
height: 50px
&::before
content: ""
background: sprite($buttons, arrow) no-repeat
display: block
position: relative
width: 20px
height: 20px
&:hover
background-color: gray
&::before
content: ""
background: sprite($buttons, arrow_hover) no-repeat
position: relative
width: 20px
height: 20px
Based on #HP answer, I could figure out how to make it work. Instead of
#include buttons-sprites(arrow)
just use
background: sprite($buttons-sprites, arrow);
This is very similar to the workaround #HP proposed, but instead of calling sprite-map I make use of the implicitly generated variable $buttons-sprites.