I am developing a phonegap App for Android containing a form.
HTML :
<input class="holo">
Here problem is that the input tag has not applied with CSS style in my Samsung Galaxy Pocket (4.0.4). But in Moto G (KitKat 4.4.2) works fine!!
CSS I used:
input.holo {
width: 100%;
height: 30px;
font-family: "Roboto", "Droid Sans", sans-serif;
margin: 0;
padding: 8px 8px 6px 8px;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#09c, #09c) no-repeat, bottom center linear-gradient(#09c, #09c) repeat-x, bottom right linear-gradient(#09c, #09c) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo:disabled{
background: #e8e8e8
}
input.holo:disabled:hover{
background: #e8e8e8
}
input.holo:hover, input.holo:focus {
background: bottom left linear-gradient(#09c, #09c) no-repeat, bottom center linear-gradient(#09c, #09c) repeat-x, bottom right linear-gradient(#09c, #09c) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
Thanks.
PS: In Chrome works fine!!
http://jsfiddle.net/GLVc8/
Related
I want to create a zig-zag border in css which is responsive, i.e. the zig-zag border must adjust itself to fit perfectly according to width of the container.
I was able to create this:
But on changing the width it's output is :
I want to perfectly fit the zig-zag pattern like above image on changing the width of the container.
It would be helpful if I could also add some radius at peak points like this :
Here is the code so far
.container {
width: 664px;
}
.sub-container {
border: 2px solid black;
border-bottom: 0;
padding: 40px;
height: 200px;
}
.upper-zigzag {
background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) 0px 0;
background-size: 60px 60px;
background-color: black;
height: 32px;
background-repeat: repeat-x;
border-left: 2px solid black;
border-right: 2px solid black;
}
.lower-zigzag {
position: relative;
background:
linear-gradient(315deg, #ffffff 25%, transparent 25%) -28px -30px,
linear-gradient(45deg, #ffffff 25%, transparent 25%) -28px -30px;
background-size: 60px 60px;
background-color: transparent;
height: 30px;
background-repeat: repeat-x;
margin-top: -30px;
z-index: 1;
}
<div class="container">
<div class="sub-container"></div>
<div class="upper-zigzag"></div>
<div class="lower-zigzag"></div>
</div>
Thanks!
I need to create a "div top" with a pentagon shape with a background inside.
Is this possible with CSS3? I have tried a number of things with not success. This is the code I am currently left with:
.sectionDIVHead:before {
position: absolute;
float: left;
content: " ";
background-size: 50% 80%;
background-color: inherit;
width: 40px;
height: 40px;
margin-left: calc(50% - 95px);
margin-top: -5%;
background-position: bottom;
border-left: 52px solid transparent;
border-right: 54px solid transparent;
background-image: url("../images/Icon.png");
background-repeat: no-repeat;
background: linear-gradient(to top left, #000 50%, transparent 51%)0% 100%/50.5% 70px no-repeat, linear-gradient(to top right, #000 50%, transparent 51%)100% 100%/50% 70px no-repeat;
padding: 35px;
padding-bottom: 0;
text-align: center;
}
If the html code below is run on a small screen, one or more buttons will naturally move on to the "lower line", adjusting to screen size. In principle that's great but unfortunately any button moving from the row will be glued to a button above. That... is ugly and less functional.
How can I space them vertically?
<style>
.button {
background: #fcfcfc;
background-image: -webkit-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -moz-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -ms-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -o-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: linear-gradient(to bottom, #fcfcfc, #d6d6d6);
font: large;
color: ButtonText;
display: inline-block;
padding: 5px 12px 5px 12px;
border: solid #b8a8a8 1px;
text-decoration: none;
}
.button:hover {
border: solid #7b6b6b 1px;
text-decoration: none;
}
</style>
<center>
<div class="container">
Archive 1
Archive 2
Archive 3
Archive 4
</div>
</center>
You're attempting to affect spacing on an inline element (the anchor tag) which isn't as clear-cut as a block element (list item for instance). Try wrapping your anchor tags in a block element and apply the style to the wrapping object.
Have a look at this post for reference: Padding for Inline Elements
.button {
background: #fcfcfc;
background-image: -webkit-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -moz-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -ms-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -o-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: linear-gradient(to bottom, #fcfcfc, #d6d6d6);
font: large;
color: ButtonText;
display: inline-block;
padding: 5px 12px 5px 12px;
border: solid #b8a8a8 1px;
text-decoration: none;
}
.button:hover {
border: solid #7b6b6b 1px;
text-decoration: none;
}
#media screen and (max-width: 480px) {
.button {
display: block;
width: 200px;
}
}
<center>
<div class="container">
Archive 1
Archive 2
Archive 3
Archive 4
</div>
</center>
Thanks to #DanielC for his link I could find the solution. Very simply you only have to add margin definitions on .button styling. That way the buttons are always neatly arranged, no matter the size of the screen! 8-)
<style>
.button {
background: #fcfcfc;
background-image: -webkit-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -moz-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -ms-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: -o-linear-gradient(top, #fcfcfc, #d6d6d6);
background-image: linear-gradient(to bottom, #fcfcfc, #d6d6d6);
font: large;
color: ButtonText;
display: inline-block;
padding: 5px 12px 5px 12px;
margin: 5px 5px 5px 5px;
border: solid #b8a8a8 1px;
text-decoration: none;
}
.button:hover {
border: solid #7b6b6b 1px;
text-decoration: none;
}
</style>
<center>
<div class="container">
Archive 1
Archive 2
Archive 3
Archive 4
</div>
</center>
I am interested in creating a series of dots that are very close together, like how they have it on the Bloomberg website: http://www.bloomberg.com/markets/commodities
How can I create this? I especially don't know how to create the close compact lines in between the rows.
.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
padding:0px;
}
Thanks in advance!
Inspect element
SNIPPET
.dots {
line-height:17px;
}
.dots:before{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVQIW2P83Sf3n7XoESMjAxQAADjFBAPqoJzEAAAAAElFTkSuQmCC) repeat;
text-indent: -119988px;
overflow: hidden;
text-align: left;
text-transform: capitalize;
content: "pattern dots";
height: 1.25rem;
width: 100%;
display: block;
}
<div class="dots"></div>
the solution can be found in this link
https://codepen.io/aleprieto/pen/nAmIy
<div class="dotted">Dotted</div>
<style>
#import url(http://fonts.googleapis.com/css?family=Oswald);
div {
text-align: center;
font: bold 21px 'Oswald',sans-serif;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
text-transform: uppercase;
}
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
}
</style>
I have a CSS button definition that looks like this:
.btn {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #acacac;
border-radius: 8px;
background: #f5f5f5;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#acacac));
background: -moz-linear-gradient(top, #f5f5f5, #acacac);
background: linear-gradient(to bottom, #f5f5f5, #acacac);
-webkit-box-shadow: #ffffff 0px 0px 40px 0px;
-moz-box-shadow: #ffffff 0px 0px 40px 0px;
box-shadow: #ffffff 0px 0px 40px 0px;
text-shadow: #ffffff 1px 1px 1px;
font: normal normal bold 20px arial;
color: #111111;
text-decoration: none;
}
.btn:hover,
.btn:focus {
border: 1px solid #f5f5f5;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cecece));
background: -moz-linear-gradient(top, #ffffff, #cecece);
background: linear-gradient(to bottom, #ffffff, #cecece);
color: #111111;
text-decoration: none;
}
.btn:active {
background: #acacac;
background: -webkit-gradient(linear, left top, left bottom, from(#acacac), to(#acacac));
background: -moz-linear-gradient(top, #acacac, #acacac);
background: linear-gradient(to bottom, #acacac, #acacac);
}
.btn:before{
content: "\0000a0";
display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 4px -6px -4px;
position: relative;
top: 0px;
left: 0px;
background: url("../img/rn.png") no-repeat left center transparent;
background-size: 100% 100%;
}
I need couple of those buttons on my page but with different icons.
I tried something like this:
.client{
background: url("../img/client.png") no-repeat left center transparent;
background-size: 100% 100%;
}
.poslovnica{
background: url("../img/poslovnica.png") no-repeat left center transparent;
background-size: 100% 100%;
}
And calling it with:
<p><a class="btn client" href="#">Klijenti</a></p>
<p><a class="btn poslovnica" href="#">Poslovnice</a></p>
But that did not work.
I'm still struggling with HTML and CSS so I'd like to stay away from java, jQuery and such till I'm a bit more comfortable with HTML/CSS.
Here's a working test in jsFiddle: jsfiddle.net/8hKGf/3
Well, you are almost there... Look at this one, using your code.
http://jsfiddle.net/fg7Ya/
It will output the same image for each button.
If we go further, we get this:
http://jsfiddle.net/fg7Ya/2/
Which is this, in short:
.btn.client:before {
background: url("http://www.klm.com/jobs/nl/images/icon_updateprofile_tcm701-313773.gif") no-repeat left center transparent;
}
.btn.poslovnica:before {
background: url("http://www.dhl.nl/content/dam/General%20DHL%20pictures/Icons/Small%20teasers_50x50/dhl_open_account_icon_42x40.jpg") no-repeat left center transparent;
}
If I got you right, you want to keep your gradient and have those icons within your button? If so, use background-image for your icons. This will keep the background gradient:
Fiddle
.client{
background-image: url("../img/client.png") no-repeat left center transparent;
background-size: 100% 100%;
}
.poslovnica{
background-image: url("../img/poslovnica.png") no-repeat left center transparent;
background-size: 100% 100%;
}
Moreover, you schould remove the <p> Tag from the anchor.
you just need your background-size this will keep background color.
check out this fiddle :
http://jsfiddle.net/C45ks/
.client{
background: url("http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg")
no-repeat left center transparent;
**background-size: 20% 60%;**
}
.poslovnica{
background: url("http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg")
no-repeat left center transparent;
**background-size: 20% 60%;**
}