Hi everybody, i am working on a html5 interface wich uses drag and drop. While i am dragging an element, the target gets a css-class, which makes it bidirectionally rotate due to a -webkit-animation. @-webkit-keyframes pulse { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform:rotate(-10deg); } 75% { -webkit-...
Why when I want to use border-radius do i need 3 seperate browsers? border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; Why can't they all just understand border-radius ? ...
Is there's something like != (not equal) in CSS? e.g, I have the following code: input { ... ... } but for some input's I need to void this. I'd like to do that via adding class "reset" to input tag, e.g. <input class="reset" ... /> which simple skip this tag from CSS... How I can do that? Only one way I can see, it's to add so...
I have this CSS: <style type="text/css"> .tab { display: none; } .tab:target { display: block; } </style> And this HTML: <div class="tab_container"> <ul class="tabs"> <li><a href="#updates-list">List</a></li> <li><a href="#updates-map">Map</a></li> </ul> <ul class="tab list" id="updates-list"> Eh.. Hello! </...
I'm trying to switch from AjaxControlToolkit to jQuery UI tabs for a fairly simple tab element. I'm 99% there with CSS and theming, but I'm running into a wall attempting to get rounded corners on the tabs in IE. jQuery UI provides the styles needed for rounded tabs in better browsers, but it might be a deal-breaker if we can't get the...
I'm trying to make a button mixin like this: =default_button(!lighter, !darker) :border= 1px !lighter solid :background-color #e3e3e3 :background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, #d0581e :background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 #d0581e :filter...
Hi, I use CSS3 to animate my page, but I have a problem with a composant : the height of this one is calculated in Javascript (Dojo), and is applied with the function dojo.style(mycomposant,calculatedHeight). I've set the following css property to this composant : "-webkit-tansition: height 5s linear", but because I applied the property ...
:-moz-system-metric(touch-enabled) looks like a really useful CSS selector for working on mobile sites. Unfortunately Webkit is dominant on mobile touch devices so does anyone know if there is a Webkit equivalent? (Ideally it'd be good if this was managed by CSS3 media queries) Edit: Looks like it is supported in Gecko as a media que...
Hi Everyone, I've been trying to figure out a new creative way to show confirmation a message has been sent. My idea is to actually TWIRL, FLIP or ROTATE the postcard using CSS3 Animation so the frontside appears after the person clicks on submit. Here is my link: link text I don't want to use flash anymore!! Anyone can point me in ...
I'm developing an application that uses Google Maps API v3. I want to make custom overlays that are squares exactly 1000km on each side (each overlay is actually a 1000x1000 transparent png, with each pixel representing 1 square km). My current implementation is this: function PngOverlay(map,loc) { this._png = null; this._loca...
Hi, I have a webpage with a content image. On this image, I want to highlight a few different items, triggered by the user rolling over the corresponding item in the text on the same page. I have transparent PNGs that I can use as image overlays to accomplish the highlighting. I know how to make an overlay appear STATICALLY by using sp...
Is it possible to rotate content by any angle in the new IE9 preview? Filter in IE8 could rotate by multiples of 90, was this changed / improved? Or is here any other way (besides drawing with canvas and svg) to rotate text and divs? ...
I would like to use the Matrix filter, however it does not work at all in IE9, unlike in IE8. Was the filter idea deprecated with the new version? Is here any way to get it working? Thanks ...
This question is pretty much the same as this one except that I'm seeing it exclusively in Safari on Mac (the only platform I need to care about). It's definitely CSS-related and I think I've narrowed it down to a few properties which seem to wreak havoc on the way text is rendered. They are: -webkit-transform-style: preserve-3d; -webki...
We are building essentially a product/image sorter in pure CSS and js. The sorter will reorder products into different groups based on filtering and selecting. It needs to be ultra fast and smooth when moving/shifting products etc Here is an example in flash of what I am talking about (click the links in the middle of the page to see an...
When using a custom font via @font-face, it does render just as I think it should in Chrome. In Firefox, though, additional padding (top and bottom) is added to the font. Here is my example page that outlines the problem. Is there anything I can do about it? ...
I just downloaded the latest version of Opera. Is there a way to make my elements (div tags) rotate with CSS3? ...
I have a <table> that the data is separated per 2 <tr>'s So i want to style the rows(each 2 rows) as zebra stripped, but each set of 2 should be styled. I am trying something like: tr:nth-child(3n+1), tr:nth-child(4n+1){background:#f7f7f7;} I would prefer a CSS3 solution, but if only jQuery can do it, that will be fine. Please see...
I'm trying to achieve this effect with css3: The HTML code is cleanly something like ... <header> ... </header> <div id="wrapper"> ... </div> ... and the css is, for the moment, something like header { display: block; width: 900px; height: 230px; margin: 0 auto; border: 1px solid #211C18; ... b...
this is my code: <style type='text/css'> div { width: 100px; height: 100px; text-align: center; font-size: 22px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, ...