way in one of the articles
from the links before:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And if you want to dig deeper the other links are really helpful:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://www.w3.org/TR/css-flexbox-1/
--
Jon Reece
jo
ks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://www.w3.org/TR/css-flexbox-1/
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://w
ing all of their pages passing
validation ;)
http://validator.w3.org/check?uri=http://www.w3.org/blog/dpub/2014/10/01/new-draft-for-the-requirements-for-latin-text-layout-and-pagination-published/
--
Jon Reece
jon.re...@gmail.com
_
happening, change the display to block:
.textwidget > img { display: block; }
* http://en.wikipedia.org/wiki/Descender
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/
nstead. Then, setting left and right margins to auto should
give you the centering you want. Here's a quick example, this assumes you
are setting a fixed width on the menu items:
http://codepen.io/jreece/pen/EKJrd?editors=110
--
Jon Reece
jon.re...@gmail.com
___
mples/IconFont/
Of course, there are pros and cons to web fonts in general that you should
take into consideration:
https://www.google.com/?q=pros+cons+web+fonts
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lis
> items in square brackets?
>
As usual, Chris Coyier has a really good write-up about this. Worth
checking out:
http://css-tricks.com/attribute-selectors/
--
Jon Reece
jon.re...@gmail.com
http://codepen.io/jreece/
__
css
styling, only the positioning is different.
>
Maybe a pixel-rounding issue?
Bumping the width of .l-region--navigation nav > .menu > li ul.menu up to
100.5% appears to remove the unwanted separation in Chrome.
--
Jon Reece
jon.re...@gmail.com
__
pe mentioned about other properties effects on positioning.
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailm
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
transform: rotate(25deg);
}
The reason the codepen example works without them is because the vendor
prefixes are being added automatically at run-time by a handy little script
from Lea Verou > prefixfree.js (http://leaverou.gi
On Tue, Mar 4, 2014 at 7:43 AM, John wrote:
> Let's say you want to have an image tilt at 25 degrees...is this within
> CSS3's abilities?
Absolutely. Here's a demo:
http://codepen.io/jreece/pen/JeIHs
--
Jon Reec
de
you could accomplish this with CSS 2.1 using display: inline:
Example: http://codepen.io/jreece/pen/yznEw
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/
igsby and furthered by Tim Kadlec:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/li
resource for stuff like this:
http://mobile.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
Try searching the rest of the site for more resources.
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lis
p://www.w3.org/TR/css3-background/#special-backgrounds
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List
good write
up on child and sibling selectors:
http://css-tricks.com/child-and-sibling-selectors/
+1 Micky's links :)
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/m
aw's tagline is "Stop writing code.
Start drawing it."
http://macaw.co/
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ
On Sun, Oct 27, 2013 at 9:00 PM, The Doctor wrote:
> What would you recommend for a good HTML5 CSS3 reference?
HTML5
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
CSS (all versions)
https://developer.mozilla.org/en-US/docs/Web/CSS
--
Jon Reece
jon.re...@gmail.
a document:
HTML:
CSS:
// Same with CSS imports
@import url("other.css");
@import url("one.css"); <-- winning
[!] unless the nuclear option !important is used in one but not the other
--
Jon Reece
jon.re...@gmail.com
__
e to do this with
> percent values?
>
Your second example doesn't work because there is no context from which to
calculate percentages (i.e. -120% of what?) .
If you add a height to your container (.wrapper2) then the animation works
as expected because it now has a context (height)
u'll need to
apply block formatting since they are inline by default.
Example CSS:
.event span.title { display: block; }
More info:
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
--
Jon Reece
jon.re...@gmail.com
__
c
by floating the input and giving the label
block formatting context.
Example:
http://codepen.io/jreece/pen/nIeFv
A good explanation:
http://www.youtube.com/watch?v=8YtQwv1cUVs
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [
and-tutorials/
* Why use sprites for icons when you can use web fonts?
http://fortawesome.github.io/Font-Awesome/
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listi
a user setting to be modified in
order to print background images.
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discus
Use the Chrome Developer Tools console tab to see them
(option+command+i). The navigation buttons work as expected with javascript
disabled.
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.cs
g to their
list item properties, so there is currently no way to style a list item
bullet differently from the list item to which it belongs. Alternatively,
you could use pseudo-elements (http://jsfiddle.net/leaverou/ytH5P/), or
even icon fonts (!) http://cdpn.io/sKjef.
The
responsive design features are opt-in.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css
and download' button, just after it, and then continue down.
>
> I've been messing with display and positioning styles for hours and
> hours and just cannot get this to look like I want.
>
This may help you come up with one solution:
http://alistapart
dded below for descenders. The 2 easiest ways to prevent this from
happening are 1) apply display: block to the image, or 2) add
vertical-align: top/bottom/middle.
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css
yntax issue?
--
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-
(Keep inadvertently replying to OP instead of reply all... so sorry for
duplicate Angela.)
You are using shorthand values for a non-shorthand property
"background-image:"
Change to "background:" and you should be good.
--
Jon Reece
jon.re...@gmail.com
On Wed, Feb 27, 201
Inadvertently replied off-list earlier. Posting again in case someone else
can benefit. Apologies for the dupe John.
On Sat, Feb 23, 2013 at 9:41 AM, Jon Reece wrote:
>
> On Sat, Feb 23, 2013 at 5:31 AM, John wrote:
>
>> I know there's no one-size-fits-all solution but as
32 matches
Mail list logo