I'm getting these really crisp/pixelated circles and I don't really know what to do to stop it.
Here's the code:
.flex-control-nav a {
padding:3px;
border-radius:100%;
width:0px;
height:0px;
border:2px solid #fff;
float:left;
cursor: pointer;
text-indent: -999em;
margin-left:5px;
}
I'm not having any problems with that code, could it be your screen resolution?
You could try just changing the percentages, but keeping 100% should be just fine.
border-radius: 100px;
http://jsfiddle.net/8tsdLxny/
http://i.imgur.com/eV81Xom.png
Related
I have the following problem and it drives me crazy:
Basicly I have a div-container with an background. This background should change when I hover it (see pichture). It is an png and instead of white it should turn red.
What I have done until now:
First: CSS sprite
Thought it will be the best solution but becuase the div changes it's size (responsive) and the icon does not have a fixed size it was not very clean: I had a small offset on hovering. Not sure why… mybe this can be fixed…
Second: 2 separate images
But this is not an option in this case because I need to work with inline styles. :hover ist not available as inline style.
Thrid: tried mask-box-image
Was a woderful solution… but Firefox does not support it.
Does anyone has another idea how to solve it?
Give This a Try
CSS
.icon-cont{
height:300px;
width:300px;
background-color: #ff0000;
text-align:center;
}
.icon-cont:hover{
background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
border-color:#ff0000;
}
.icon{
height:0px;
border-bottom:2px solid #fff;
width:60%;
line-height:300px;
position: relative;
margin:auto;
top:50%;
}
.icon::before{
content:"";
position: absolute;
top:0;
bottom: 0;
left:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
.icon::after{
content:"";
position: absolute;
top:0;
bottom: 0;
right:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
HTML
<div class="icon-cont">
<div class="icon"></div>
</div>
Link for reference
hope this helps..
May be it will help
I posted an example following
.box {
padding: 20px;
display: inline-block;
background:tomato;
}
.box:hover {
background: transparent;
}
.box:hover span {
color: tomato;
}
.box span {
display: inline-block;
color: #fff;
}
<div class="box">
<span>a</span>
<span>----</span>
<span>b</span>
</div>
You can't change color of .png with css. I think you should make a font out of your icons in order to change their color with css later.
I haven't done that myself, but I know those fonts, like font-awesome can change color. There are some automatic generators in google to make your own font.
Try this.
I am trying to align a button placed inside span, it looks fine in desktop browser but in mobile browser the button is not aligned centred, see attached image
I have simple css attached to the span
.navigatebutton
{
display:inline-block;
width:40px;
height:40px;
border-radius:50px;
font-size:20px;
color:#fff;
text-align:center;
text-decoration:none;
cursor: pointer;
background:rgba(0,0,0,.3);
}
and the html look like below
For RIGHT navigation button
<span style='top: calc(45% - 10px); right:2%; position:absolute;' class='navigatebutton preview-next'><button aria-hidden='true' data-icon='\e62d;' class='icon-arrow-right2' style='margin-top: 7px; background: rgba(0,0,0,0);'></button></span>
For LEFT navigation button
<span style='position:relative;top: calc(45% - 10px); left: 2%; class='navigatebutton preview-previous'><button aria-hidden='true' data-icon='\e630;' class='icon-arrow-left2' style='margin-top: 7px; background: rgba(0,0,0,0);' ></button></span>
I am using icommon font for the arrows.
Please help to align the arrows perfectly.
Cheers.
This will work for you https://jsfiddle.net/ezj1Lfbw/11/
change .navigatebutton{display: flex}
change margin-top: 7px; to margin: auto
Thanks for your help.
I figured out the solution, culprit was border-radiuswhich supposed to be half the width to make circle, the value was greater and thus it was failing. So the correct css would be
.navigatebutton
{
display:inline-block;
width:40px;
height:40px;
border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
font-size:20px;
color:#fff;
text-align:center;
text-decoration:none;
cursor: pointer;
background:rgba(0,0,0,.3);
}
Thanks.
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
Is there any way to set a default width for a group of divs, but then change each width regardless of order in just CSS? Example JSFiddle is at http://jsfiddle.net/RfHSA/.
I'm attempting to have each div set to width:20%, but then upon the mouse hovering one of the inner divs, the specific div hovered over should be set to width:72% and the others set to width:7% (including ones that occur prior to it in the HTML structure). Is this possible with just CSS, or is Javascipt/jQuery required?
Edit: Example of what I'm trying to achieve is here: http://www.kriesi.at/themes/newscast/
I'd like to recommend an easy solution to your need: http://jsfiddle.net/linmic/qcnmu/1/
We simply apply display: table to the "listwrapper" and display: table-cell to the "outerbox", then everything works perfectly.
Cheers
You were 99% there: http://jsfiddle.net/RfHSA/2/
.featuredwrapper {
width:100%;
height:350px;
margin:auto;
background-color:rgba(0,0,0,0.5);
padding-top:12px;
position:relative;
}
.listwrapper {
width:95%;
max-width:1100px;
height:325px;
margin:auto;
position:relative;
}
.listwrapper:hover .outerbox {
width:7%;
}
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
.listwrapper:hover .outerbox:hover {
width:72%;
}
.outerbox:first-child{
margin-left:0px;
}
.hoveractive {
position:absolute;
width:95%;
height:325px;
z-index:1000;
padding-top:12px;
}
I minimally fixed them all errantly closing, I think the remaining problems related to decimal widths associated with % widths...
http://jsfiddle.net/RfHSA/15/
Here's a working version of your script. You definitely need some javascript manipulation here to make it work. I tried to use as little as possible and as you can see from the results, it's a little shaky, but hopefully it gets you on the right track.
EDIT: Oh well, I tried, but the other guy's solution is better =P
Updated to prevent premature collapsing
Tweaking your CSS gave this solution (see fiddle). It requires the padding-top to move from the .listwrapper to the .featuredwrapper to prevent premature collapse from top entry:
Tweaked CSS
.outerbox {
width:20%;
height:100%;
display:inline-block;
background-color:#e8e8e8;
margin-left:-4px;
box-shadow:-5px 0px 5px rgba(51,51,51,0.85);
-webkit-transition: width .3s ease-out;
}
/*prevents premature collapse on right side entry*/
.outerbox:last-of-type:after {
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: -2px;
}
.listwrapper:hover .outerbox {
width: 7%;
}
.listwrapper .outerbox:hover {
width:72%;
}
http://www.pressedweb.com/beta/#portfolio
My anchor tags (highlighted in red dashed border) are being created by their own free will. I have no idea how to get rid of them and have been working at this for hours now.
Any ideas? Is this some freaky cross-browser bug? Or is it just a problem with my markup?
Thanks.
I thinkg this fix will work for you:
div .portfolio .works a img {
-moz-box-shadow:1px 2px 3px #222222;
opacity:0.8;
}
div .portfolio .works a {
border:1px solid #FF0000;
display:block;
float:left;
height:220px;
margin:0 10px 10px 0;
padding:4px;
width:280px;
}
Basically what i did was just switched some styling from img to anchor. You can see in this image that it does work ok.