Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .
Related
I need to take the CSS selector to use in selenium code the tag is
<div id="pbpopup-container" style="border-radius: 10px !important; box-shadow: rgb(170, 170, 170) 1px 1px 5px !important; display: block !important; overflow: hidden !important; position: fixed !important; right: 20px !important; top: 20px !important; visibility: visible; z-index: 2147483647; border: none !important; opacity: 1; bottom: auto !important; height: auto; width: auto;">
from this tag I need a CSS selector like '//div[#id='pbpopup-container'] and visibility: visible', can anyone help in this.
Since I don't have a selenium at hand right now, take this with a grain of salt:
//div[#id="pbpopup-container"](contains(#style,'visibility:visible'))]
Here is the css that you are looking for.
div[style*='visibility: visible']#pbpopup-container
Screenshot:
I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>
I need to add this image at the end of a line, in this way
Style:
h4 { border-bottom: 1px solid black; font-size: 1.6em;}
Code that I did:
<h4>Socializziamo <img src="flourish-decoration.png"
style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>
Is there a better way, because my solution sometimes does not works...
Riccardo
Here's an alternative to ggbhat's answer. The approach here is to apply relative positioning on the heading and absolute positioning on the nested image.
HTML
<h4>
Socializziamo <img src="http://i.stack.imgur.com/68LQd.png" />
</h4>
CSS
h4 {
border-bottom: 1px solid black;
font-size: 1.6em;
position: relative;
}
img {
position: absolute;
right: 0;
bottom: -1px;
}
Demo
http://jsfiddle.net/LqvTx/1/
Use :after psuedo element for adding background image .
h4
{
border-bottom:1px solid #000;
width:100px;
}
h4:after {
content:"";
background:url(http://i.stack.imgur.com/68LQd.png)no-repeat;
width: 30px;
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}
Demo:[http://jsfiddle.net/LqvTx/ ]
When using an alpha transparency border with rounded corners in Safari, the background clips into the border. This happens even when using background-clip: padding-box. I know that I can simply wrap the h1's in a span/div/etc and give that the border, but I'm wondering if anyone knows if it is possible to do this without any more mark up.
Here is the css I'm using:
h1.inner {
background: #ffa51f;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
border-right: 10px solid rgba(33,33,33,.05);
color: #FFF;
display: inline-block;
font-size: 47px;
font-weight: 800;
line-height: 1.2;
padding: 0 .6em 0 0;
position: relative;
text-transform: uppercase;
text-align: left;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
background: #ffa51f;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
content: "";
position: absolute;
top: -10px;
bottom: -10px;
width: 9999px;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
right: 100%;
}
Below is a jsfiddle and screenshot with an example of what I'm talking about.
http://jsfiddle.net/39Xen/
http://imgur.com/Hp2bzBm
Is it posible that what you are asking has been addressed here:
CSS rounded corners bug in Safari?
?
It seems that Safari has some limitation with respect to what you are trying to do.
Hope that helps.
I have applied rounded corners styles to my ASP.Net button & text box controls and also to fieldset and legend.
Here is my CSS-
fieldset
{
width:605px;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
fieldset legend
{
background: #606060 url(images/bluelines.gif) repeat-x center left;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 7px;
padding: 10px 10px 0px 5px;
}
fieldset legend:hover{
background: #606060 url(images/blue-lines.gif) repeat-x center left;
}
fieldset legend img
{
padding: 0px 6px 0px 0px;
position: relative;
bottom: 5px;
}
.txtBox
{
border: 1px solid #DDDDDD;
height:15px;
width: 200px;
padding: 5px;
background: #ffffff;
-moz-border-radius: 5px;
border-radius:5px;
-webkit-border-radius: 5px;
}
.txtBox:focus{
border: 2px solid #50cff1;
box-shadow: 5px 1px 1px 5px #000;
}
.buton{
background: #50cff1 url(images/nav-act.gif) repeat-x center left;
border: none;
color: #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.buton:hover
{color: #000000;}
Here is skin code-
<asp:TextBox runat="server" CssClass="txtBox" SkinID="textBox" />
<asp:Button runat="server" CssClass="buton" SkinID="button" />
But these styles aren't working in Internet Explorer(8,7,6). Please let me know any solution so that all of these styles will apply on these elements(asp.net button & textbox, fieldset & legend) in IE too!
Regards,
nzahra
IE8 and below don't support CSS3, only IE9 does. To mimic CSS3, you'll need to use filters, .htc files (behaviors), images, or some combination thereof for any CSS3.
You can use conditional comments to hide the IE stuff from other browsers. Here's some info on filters, and one way of rounding corners in IE..