Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How to style Google custom search engine using css
Help me,
Thanks in advance.
<div class="messagepop pop">
<script> //Google Custom Search Engine Code
</script>
<gcse:search> </gcse:search>
</div>
.messagepop input{
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline:0;
height:55px;
padding: 5px;
}
.messagepop input{box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.34),
-15px -14px 0px rgba(255, 255, 255, 1),
18px -55px 0px rgba(255, 255, 255,1),
33px -6px 0px rgba(255, 255, 255, 1); }
.messagepop input:last-child{ background: #32c77f;
line-height: 50px; height: 35px; width: 80px; margin-top: 28px; }
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to animate border-bottom of my list-item in navbar and i don't know what property/s should i use.
The animation is like yahoo mail registration input
the trick is to use an inset shadow
input {
width: 80%;
height: 30px;
border: none;
background: transparent;
}
.shadow {
box-shadow: inset 0px -1px 0px 0px #ccc;
transition: 0.8s;
}
.shadow:focus {
box-shadow:inset 0px -3px 0px 0px #7777dd;
outline: 0;
}
<input class="shadow" type="text" placeholder="Placeholder" />
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a little CSS issue right here. I'm creating a simple button and I have the desired effect and all; but the button doesn't stop and acts like width:100% while I have width set to auto. I have put my code below and the effect is currently has.
>> CURRENT OUTCOME
a.abutton {
display:block;
background-color: #49b4df;
background-image: -webkit-linear-gradient(#49b4df, #2497c5);
background-image: -moz-linear-gradient(#49b4df, #2497c5);
background-image: -o-linear-gradient(#49b4df, #2497c5);
background-image: linear-gradient(#49b4df, #2497c5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#49B4DF', EndColorStr='#2497C5');
width: auto;
height: 31px;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 2px 5px 5px 5px;
border: 0px none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-moz-box-shadow: 1px 1px 2px #919191;
-webkit-box-shadow: 1px 1px 2px #919191;
box-shadow: 1px 1px 2px #919191;
}
Question: How do I stop the button from expanding and stop where the text also stops?
Try to change
display: block;
by
display: inline-block;
"width:auto" inherit the parent "width" with a "display: block."
You need to change the display to inline-block
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So, I found a new theme for my tumblr blog, and it had a few issues, which I mostly managed to sort out, but now I'm facing a big one.
The captions, i.e. the comments and images below the content itself, are overflowing over the container that is set.
Here's the code I'm using http://freetexthost.com/abfqho3n5h
I've done some small changes to it, but nothing major or irreversible, that aren't shown here because this is the original code, so if you see some other major issue, feel free to tell me.
Here's an example of what happens http://two-dames.tumblr.com/post/121988188767/randomguy2015-because-tina-madqueenieb.
Add word-wrap: break-word to your posts class
.posts {
width: 500px;
background: #fff;
color: #aaa;
font-family: 'Gibson', sans-serif;
font-size: 12px;
margin-bottom: 20px;
padding: 10px 10px 10px 10px;
text-align: left;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
word-wrap: break-word;
}
Edit
For your image you could define an img tag with a max-width: 100%; This makes sure the aspect ratio is preserved and scales the image down accordingly.
img {
max-width: 100%;
}
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Anyone know of a way to create one of these lines (refer to image) in CSS?
Here's a rough approximation to start with. You'll need to adjust the specifics. Basically what I've done is create an overhang div, and beneath that is a div that will create a shadow with a falloff on the ends. The overhang div sits on a higher layer so you only see the edge of the shadow.
Demo:
http://jsfiddle.net/X5muV/
Another one, slightly darker: http://jsfiddle.net/X5muV/1/
HTML:
<div id="container">
<div id="overhang"></div>
<div id="falloff-shadow"></div>
</div>
CSS:
#container {
background: #5A5A5A;
width: 700px;
padding: 200px 0 80px 0px;
}
#overhang {
background: #5A5A5A;
border-top: 1px solid #666;
height: 80px;
width: 600px;
margin: 0 auto;
position: relative;
z-index: 5;
}
#falloff-shadow {
width: 500px;
margin: 0 auto;
-webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
position: relative;
z-index: 1;
height: 1px;
top: -65px;
}
Yes, you can create that in css3. You will have to combine some effects, but I think a grey line (you will have to add some extra space below, explained later) with a shadow will do.
To write a shadow that appears only in one side (top), check this question/answer: How can I add a box-shadow on one side of an element?
Based on that example, you can try something like:
.myDiv
{
width: 700px;
height: 50px;
border-top: 2px solid #333;
-webkit-box-shadow: 10px 0px 0px -2px #888 ;
}
The shadow is still there on the left, but hidden (-2px). That gives you the illusion of a single shadow. This is just a start-up, try different options and come back if you have any particular questions. But do it yourself first.
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}