Is this the right way to do a box-shadow for IE? Does this work on your computer?
filter:progid:DXImageTransform.Microsoft.DropShadow(color='#000000',offX='20',offY='20');
Pre-IE 9:
filter: progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Post-IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc)";
I prefer to use CSS3 PIE (http://css3pie.com) rather than the DropShadow filter; the filter is very difficult to make look like CSS3 box-shadow on other browsers when you start adding blur. CSS3 PIE's box-shadow implementation is pretty much identical to other browsers, and as an added benefit it works in conjunction with border-radius (the shadow shape is rounded to match the rounded corners of the background/border.)
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ccc, Strength=10, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#ccc, Strength=10, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#ccc, Strength=10, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#ccc, Strength=10, Direction=270);
Related
how to add setting in tailwind.config.js if screen size is less than 780px then disable all cursor-pointers?
note I'm using nextjs and tailwind
The answer from #ahmed is almost correct. In the docs there is no cursor-disabled
If you look at the docs here you can see that Tailwind offer a cursor-none property.
The best way to set this is like Ahmed said, in your global.css file you an do something like
* {
#apply cursor-none md:cursor-auto
}
Here you're using md: which is the breakpoint for 768px min-width
But the question would be why would you want to disable the cursor on small screens? If it's mobile there wont be any cursor anyways?
I'm trying to crop not same height/width crop-area can I use rectangle crop-area.
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage" area-type="square" area-min-size="20" result-image-size="150"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
I need set height/width like area-min-size="{100, 150}" result-image-size="{100, 150}"
As far as I can see - it is not possible, as it involves a more complex manipulation of the selector area (e.g., it will need to resize in two dimensions independently).
There is an alternative however. Though it might be not as much of an eye candy as ngImgCrop, but it achieves what you need. [ http://grab.by/Cbpq ]
It is called: angular-image-crop.
Here is a JSBin sample.
You may need to play around with the following parameters data-width="", data-height="", dat-shape="square" before the result is satisfying:
<image-crop
data-width="500"
data-height="300"
data-shape="square"
data-step="imageCropStep"
data-result="imageCropResult"
ng-show="showImageCropper"
></image-crop>
#Bilegsaikhan, I found a modified version of ngImgCrop which supports rectangular crop as well as a fixed aspect ratio. Here I created a JsFiddle.
One could fiddle with the result-image-size="400" parameter to tailor the intermediate/resulting image size (this parameter defines the canvas size of an intermediate step). For the size of the final img, normal height and width of the image node can be changed.
Enjoy :)
have you tried this library https://github.com/vogloblinsky/ngImgCropExtended ? It probably extends the feature from ngImgCrop and supports area type like circle, square and rectangle
I'm testing something out and it is maybe a little bit weird but i'm confused.
Why is this not "scaling" on my iphone screen? I thought the rem property would make text smaller/bigger dependent on what screen you use? This is the code.
html
{
font-size: 100%;
}
h1
{
font-size:62px;
font-size:4.42rem;
}
...
<body>
<h1>This text is going to be smaller on an iphone screen.</h1>
</body>
..
An article from Snook.ca talks about the REM units: http://snook.ca/archives/html_and_css/font-size-with-rem
In his closing statement:
And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.
Maybe that's what is happening in your case?
I have problem in selecting links from a web document which contains word "FooBar".
I tried A:contains('FooBar') on selector test and it worked however it doesn't work from my jsoup application which is based on CSS3 selectors.
selector test: http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose
seems like CSS3 doesn't support :contains http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#content-selectors
any alternative to :contains in CSS3?
I believe that :contains was removed from the CSS3 spec, and that no browsers currently support it.
If you want to select an anchor element with an href containing "FooBar", you can use something like this:
a[href*="FooBar"] {
// your styles here
}
This selector works on any attribute and is supported in all major browsers, including IE7+.
See DEMO.
jQuery (and more specifically Sizzle) has extended the CSS selectors with its own custom selectors. :contains is a custom selector.
I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.
The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.
I want to have a style for desktop with
navbar on top
1 left column (as sidebar)
height: 100% minus navbarHeight, with a scrollbar
width: .span3
content that fills the rest of the screen
Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.
I made a sketch to explain better
EDIT: Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)
EDIT2: I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.
EDIT3: Ok, here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.
EDIT4: Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer!
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
From my investigations this week (I'm trying to accomplish the same thing), it seems like bootstrap and a 100%-height design are incompatible from a pure CSS perspective (unless you want to make changes to bootstrap). I'd be interested in seeing your jquery solution.
I'm not sure that I totally understand what you are looking for, but take a look at http://reactivewebdesign.net/Chicago/Traffic which has a top menu (adding the bootstrap navbar should be easy).
The left column spans 3 columns and the map occupies 9 columns. There is also a link in the left menu named "Where Am I" that also uses a Google map. The css for the map is at the top of the page. If you are looking to squeeze the map into three columns, merely reverse the 3 & 9 to 9 & 3 - it should still work.
Hope this helps.
here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.