I want to make 3 image effect is iOS that match Bootstrap effects:
http://getbootstrap.com/css/#images
I figured out rounded corners & circle - but..the framed one is stumping me.
"img-thumbnail" - makes a thin grey rounded rectangle frame around the image.
How can this be done?
Any library that does it?
Thx
Its pretty simple. It's just css borders. Here is the original class code from the bootstrap source.
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Related
Thank you in advanced for taking the time to look at this. I am having issues when dragging a jQuery UI draggable object from my fixed sidebar to my image as shown below. The problem is two-fold:
1) Even though the z-index is set to 9999, the object is no longer visible when it is dragged out of the fixed sidebar.
2) When the draggable object is dropped, its position is shifted up and to the left about ~30 or 40px.
Issue one (1) visualized:
Issue two (2) visualized:
I have tried changing the CSS position attribute to all types (absolute, relative, static etc) in all combinations and cannot seem to get it to work as intended.
I was hoping someone might be able to point me in the right direction in regards to these two issues. If you would like to see a live example of these issues, please see this JSFiddle:
http://jsfiddle.net/m6pgfu5m/3/
Here are the most pertinitent CSS attributes:
.signatureTool {
z-index: 999999999;
}
.image {
border: 1px solid #DADADA;
position: relative;
width: 100%;
margin-bottom: 50px;
}
#wrapper {
margin-top: -17px;
padding-left: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 999;
position: fixed;
left: 250px;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #E9E9E9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow: hidden;
}
#page-content-wrapper {
width: 100%;
position: relative;
padding: 20px;
margin-right: 0;
}
I am trying to draw a half circle and rotate it using CSS. Like so;
To style the div.circle I use border-radius:50%; then I wrap it in an overflow:hidden; div.mask that is half the width of the circle, thus hiding half of the circle. Then I use transform:rotate(45deg) to rotate the div.mask. This works fine in all browsers that I've tested.
<div class="mask">
<div class="circle"></div>
</div>
.mask {
outline: 1em solid red;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
background: blue;
width: 200%;
height: 100%;
}
But when I place this element in a block that has overflow-scrolling:touch; and overflow:scroll; and view it on Mobile Safari on iOS7 the half circle becomes a full circle because the overflow:hidden; on the div.mask doesn't seem to have an effect anymore.
.scroller {
border: 1em solid green;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
How do I fix this?
Here's a live example
I am using border radius on an input field and when I select the field, it gets a border highlight as if there is no border radius i.e. the imaginary rectangle with sharp edges gets highlighted and not the real rounded corners one. Any cues on how to get the rounded rectangle highlighted? The border radius is functioning perfectly but on focus the highlight is not on the rounded corners.
<input class="filter" type="text" name = "Test1" value="Test1"> <!--HTML-->
.filter{border-radius:9px;} /*CSS*/
This is because outline doesn't respect (for whatever reason) border-radius, to emulate this it's easiest to use box-shadow:
.filter {
padding: 0.4em;
outline: none;
border-radius: 9px;
}
.filter:focus {
box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}
JS Fiddle demo.
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
This works like a charm. you will get a good effect on focus
I'm trying to create a pointy button like this:
So far, I was only able to achieve this:
I thought increasing the horizontal border-radius would make it sharp, but all it does it make the roundness longer.
HTML
<a class="button">Back</a>
CSS
.button {
display: inline-block;
height: 3em;
padding: 0 0.7em 0 1.4em;
border: 0.1em solid black;
border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
background: -moz-linear-gradient(
top,
#fff,
#ccc
);
}
You don't want to be using border-radius as that assigns a quarter-circle shape to each specified corner. Instead you hack it with specific border-width properties, as illustrated in this site: http://www.howtocreate.co.uk/tutorials/css/slopes
However I feel you're solving the problem the wrong way; what you're doing is best done using a background image, which is how the iOS-style Back buttons are implemented in iPhone-for-web stylesheets. If you need something resolution-independent then you can use SVG without penalty now.
Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.
HTML
Back
CSS
a.button {
text-decoration:none;
color:#111;
text-shadow:0 1px 0 #fff;
font-weight:bold;
padding:10px 10px;
font-size:14px;
border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #666;
border-left:0;
background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);
}
a.button:after {
content:"";
width:25px;
height:25px;
background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:5px;
left:-14px;
z-index:-1;
border:1px solid #666;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
border-left:0;
left:-13px;
}
The last rule is for Chrome, which otherwise renders the result slightly differently.
Hope this helps.
You can create such an effect using 2 elements side by side wrapped in the anchor tags.
<style type="text/css">
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid orange;
float:left;
}
.button {
float:left;
height:60px;
background:orange;
width:50px;
line-height:60px;
font-weight:bold;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
</style>
</div><div class="button">Back</div>
I'm not sure if it's the most refined solution, but it certainly looks the same as your concept art and functions as intended.
I'm using a speech bubble style tooltip based on the jquery ui tooltip widget 'Custom Styling' demo, but I'm having trouble properly displaying the arrow when I need it on the left side of the tooltip instead of on the top or bottom.
Can someone help me fix this code (it cuts off the tip and displays too large a section of the arrow)?
<style type="text/css">
.ui-tooltip.menu_info {
max-width: 200px;
}
* html .ui-tooltip {
background-image: none;
}
body .ui-tooltip { border-width: 1px; }
.ui-tooltip, .arrow:after, .arrow_left_side:after {
background: white;
border: 1px solid #999;
}
.ui-tooltip {
padding: 10px 12px;
color: Black;
font: 8pt "Helvetica Neue", Sans-Serif;
max-width: 150px;
border: 1px solid #999;
position: absolute;
}
.arrow_left_side {
height: 70px;
width: 8px;
overflow: hidden;
position: absolute;
top: 0px;
margin-top: 5px;
left: -8px;
}
.arrow_left_side:after {
content: "";
position: absolute;
width: 25px; height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
</style>
<script>
$(function() {
$('.menu_info').tooltip({
position: {
my: "left+20 center",
at: "right center",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow_left_side")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
Problem Description
The problem is caused by a combination of the CSS transformation and the overflow:hidden. The arrow is actually a square with width and height that is rotated 45o. The default origin point for the rotation is 50% 50% or center center which results in the "arrow" square being rotated around the middle which results in the edges being clipped by the overflow property.
It's best shown as an image or a demo (Webkit only), but the code used to demonstrate the problem is also below.
The 1st box shows the starting position of the "arrow" square, the 2nd box shows a small rotation around the center point. You can see that the edge is clipped already by the containing block's overflow:hidden. The 3rd shows a 45o rotation which demonstrates the problem you have. The 4th adds CSS to move the origin point to 0 25px, that is x=0, y=25px which is the bottom left corner, so you can see a small rotation around this point is looking better. The 5th pane shows a full 45o rotation around the modified origin. This looks much better and all that is left to do is reduce the width of the container to clip off the right hand side which leaves a left facing arrow. Then some simple CSS positioning to move it into place next to the tooltip content.
Solution
The modification needed to your CSS are small positioning changes on the container and the addition of an origin point for the rotation. I realise in the above description that I said an origin of 0 25px but in practice the arrow was still being clipped on the left side so I moved the origin out to 5px 25px instead.
.arrow_left_side {
margin-top: -5px;
left: -10px;
}
.arrow_left_side:after {
-webkit-transform-origin: 5px 25px;
/* for brevity, I have not added all the different browser prefix versions of transform-origin. If you need cross browser support, you will need to add these here */
}
See demo of the above changes
Demo Code
For completeness, here is the code to generate the above image. It's useful to interact with the demo by changing the rotation in the Chrome DevTools to see the square rotating in real time.
HTML
<div class="original"></div>
<div class="original-rotated-a-little"></div>
<div class="original-rotated-forty-five"></div>
<div class="original-with-transform-origin-rotated-a-little"></div>
<div class="original-with-transform-origin-rotated-forty-five"></div>
CSS
body {
margin-left:50px
}
div {
position:relative;
height: 50px;
width: 35px;
overflow: hidden;
top: 0px;
margin-top: 5px;
left: -8px;
border:1px dashed red;
}
div:after {
content: "";
position: absolute;
border: 1px solid #999;
width: 25px;
height: 25px;
}
div.original-rotated-a-little:after {
-webkit-transform: rotate(15deg);
}
div.original-rotated-forty-five:after {
-webkit-transform: rotate(45deg);
}
div.original-with-transform-origin-rotated-a-little:after {
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(15deg);
}
div.original-with-transform-origin-rotated-forty-five:after {
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
}
Hope this helps :-)