I am playing with CSS now, i had make a TextArea with box shadow
-webkit-box-shadow: inset 0px 2px 0px 3px black;
-moz-box-shadow: inset 0px 2px 0px 3px black;
box-shadow: inset 0px 2px 0px 3px black;
and a vertical scroll bar. But the output is a bit bad, the text is overlay the box-shadow. Any idea to solve this?
thanks to #jiff for jsfiddle, grey box-shadow will be more observe.
jsfiddle
Try add padding: 20px; to textarea
you may see if using a wrapper and a pseudo would fix your issue : https://jsfiddle.net/df7Lhomu/
.tbl {
margin:1em;
position:relative;
display:table;
}
.tbl:after {
content:'';
position:absolute;
top:2px;
left:2px;
right:1.2em;;
bottom:4px;
box-shadow: inset 0px 2px 0px 3px black;
pointer-events:none;
}
textarea{
padding-left:3px;/* box-shadow;*/
height: 200px;
overflow-y: scroll;
background:#222;
color:#fff;
}
<div class="tbl">
<textarea>
add
some
text
long
enough
in
order
to
see
the
text
behavior
while
scrolling
</textarea>
</div>
You can used below css
white-space: nowrap;
padding:10px;
Related
I have the following code in my CSS and HTML files:
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 200px 0px blue;
}
<div class="test"></div>
The shape this code produces is exactly what I want; however, I do not want the blue outline around the white part - is there anyway I can remove that?
To further clarify: here is what the shape currently looks like on a white background, and here is how I would like it to look like.
All help is greatly appreciated!
Perhaps a trick, to overlay a 2px white border over it is acceptable.
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue;
position:relative;
}
.test:before{
content:'';
position:absolute;
border-radius:50%;
border:2px solid white;
z-index:1;
top:-1px;
right:-1px;
bottom:-1px;
left:-1px;
pointer-events:none;
}
<div class="test"></div>
Tell us what you want to achieve so we can know how to help you achieve it.
This little change made the blue outline go away and left you circle looking like eclipse
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 10px 0px blue;
}
I am trying to show shadow of my container div by doing this.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
But this show shadow to right and bottom. I want to control the shadow. Can anyone guide me how can i show shadow to only one single side i-e right/left or top/bottom. Working Jsfiddle will help me to understand this. Thanks in advance
Please Try this demo
i hope i may helpfull for you
.box
{
margin:0;
padding:0;
float:left;
width:200px;
height:100px;
background:#ccc;
margin-left:20px;
-webkit-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
-moz-box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
box-shadow: inset 41px 0px 50px -5px rgba(0,0,0,0.32);
}
you can create like following:
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: inset 10px 0px 5px 0px rgba(0,0,0,0.81);
}
Above will show left side shadow. Also for right side shadow use:
box-shadow: inset -10px 0px 5px 0px rgba(0,0,0,0.81);
Check Fiddle here.
You can use Shadow Generator : Link
I have an item (a speech bubble, made using CSS and html) that is hidden on the sidebar, and it appears when you hover over the sidebar.
#sidebar .bubble {
opacity:0.0;
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after {
position: absolute;
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
#sidebar:hover .bubble {
opacity:1.1;
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
And I'm haviing some trouble with the positioning.
I like that the speech bubble appears upon sidebar hover, but it appears in the sidebar and lengthens the sidebar.
I was just wondering if there was a way to position it a little to the side, and not lengthening the sidebar, something like this?
I've tried fixed positioning and absolute positioning, but it did not work and simply caused the sidebar image under it to become bigger. Is there any possible way to position the speech bubble?
There is such way u can use posotion: absolute on the bubble and position: relative on the navigation container. Keep in mind that elements with absolute positioning will be "non-excisting " for the other elements so u must give them z-index: 3/put any number u like above 2/ . To "remove" the bubbles from the page use display: none but first position them fine. If u find it difficult ask for help again :D
Well I want to place a caption on the border of my images for a image gallery I am developing.
Basically my images use borders and margins to create a effect around them to make them look like Polaroid photos. I would like to place a caption on top of the border. here is my css.
.column img {
position:relative;
display:inline-block;
width:130px;
height:100px;
margin: auto;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
-moz-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
box-shadow: 1px 3px 3px rgba(0,0,0,.8);
border: 1px solid #fff;
padding: 5px 5px 35px 5px;
}
.column div {
max-width: 100%;
max-height: 100%;
float: left;
margin: 0 15px 5px 0;
margin-left: 5px;
border-radius: 2px;
overflow:hidden;
}
The border works fine and looks fine but the caption does not display on top of the border any help would greatly be appreciated.
Try using the <fieldset> and <legend> tags to draw a captioned box around the images.
<fieldset>
<legend>Caption Here</legend>
<!-- Image here -->
</fieldset>
I have some HTML retrieved from a database so I have no control over it and it looks different than if I just put it inside a div :
And here is my CSS:
#cvDiv {
position:absolute;
top:40px;
left: 300px;
border: none;
width: 720px;
display:inline;
background-color:White;
text-align:justify;
padding:15px;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 0px 0px 5px 5px #888;
-webkit-box-shadow: 0px 0px 5px 5px #888;
z-index:auto;
}
and here is the HTML:
http://jsfiddle.net/ug96v/
What am I doing wrong?
And what I want to do is a make the the top picture look like the bottom one.
EDIT
This ended up being a DOCTYPE problem.
Don't use position:absolute;, it forces the div to position itself relative to the the first parent container that has position:relative;. It may be causing part of the problem.