I want to do an effect similar to this
http://andrew-hoyer.com/experiments/rain/, except the div breaks up
into particles and transitions to another div. I hope I'm understood ?
Christopher
__
css-discuss
Please try the webdesign-l list. That example is done with script. This
list is for CSS.
http://www.webdesign-l.com/
On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher
crestchristop...@gmail.com wrote:
I want to do an effect similar to this
http://andrew-hoyer.com/experiments/rain/, except
Neat though ;-)
On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher
crestchristop...@gmail.com wrote:
I want to do an effect similar to this
http://andrew-hoyer.com/experiments/rain/, except the div breaks up
into particles and transitions to another div. I hope I'm understood ?
It is neat :-)
I'll move the question over to another list :)
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 5:09 PM
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 5:08 PM
Please try the webdesign-l list. That example is done with script.
I have the following Media Queries. When the screen size is 320px the
background color for the #menupanel should change to red that is not
happening when it is larger then 320px it should remain gray although
neither is happening !
body {margin:0;padding:0;background-color:blue;}
/*
Try:
@media only screen and (min-width : 320px) {
#menupanel {background-color:red;height:400px;width:320px;border:2px;}
}
@media only screen and (min-width : 600px) {
#menupanel {background-color:gray;height:400px;width:500px;}
}
On Thu, Nov 20, 2014 at 8:37 PM Crest Christopher
Using a media query doesn't contribute to specificity, so your code would
work if you moved the declaration that sets the color to gray above the
media query.
If you wanted to get all mobile first on it, you could do:
#menupanel { background-color: red }
@media (min-width: 321px) { #menupanel {
Chris code works better, although there remains a horizontal scroll bar,
maybe that is due to the fact I'm narrowing the browser window too much,
a little beyond the min-320px.
Tom your code when I scale the browser window there is a jump or gap.
What I mean is, the media querie is kicking
I love media queries, I use to think I had to make everything width
100%, media queries are almost equal to scaling a graphic in Ps, minus
the image interpolation issues etc.
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 8:46 PM
Try:
@media only screen and
I suspect the scroll bar is from telling #menupanel to be 320px, plus a border
of 2px, which would make it 324px wide, unless you are using
box-sizing:border-box;. That is where I would start looking.
Russ
On Nov 20, 2014, at 9:13 PM, Crest Christopher crestchristop...@gmail.com
wrote:
Tom, as I shrink the viewport before I reach 320px the box is red,
shouldn't it wait until the viewport is at 320px ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 9:39 PM
Look at this:
http://tomliv.com/css-d/mq/
I am using min-width. So the viewport needs
Why is it adding 4px for left and right ? I'm reading up on box-sizing,
I don't see the benefit ?
Christopher
Russ McMullin mailto:r...@catjuggling.com
Thursday, November 20, 2014 9:21 PM
I suspect the scroll bar is from telling #menupanel to be 320px, plus
a border of 2px, which would make
border of 2px, which is on all 4 sides, adds 2px on the left and 2px on the
right. 4px.
On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher
crestchristop...@gmail.com wrote:
Why is it adding 4px for left and right ? I'm reading up on box-sizing,
I don't see the benefit ?
Christopher
Russ
On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher
crestchristop...@gmail.com wrote:
Why is it adding 4px for left and right ? I'm reading up on box-sizing,
I don't see the benefit ?
Without setting box-xizing to border-box, the box model is additive (except
in older IE, ironically) which
On Thu Nov 20 2014 at 9:54:00 PM Tom Livingston tom...@gmail.com wrote:
On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher
crestchristop...@gmail.com wrote:
Why is it adding 4px for left and right ? I'm reading up on box-sizing,
I don't see the benefit ?
Without setting box-xizing to
I see, you prefer min-width ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 9:46 PM
No.
As I stated in my reply. I'm using MIN-WIDTH media queries. They are
active when the viewport is AT LEAST as wide as the dimension stated
and remain in effect until - in
Interesting border-box, smarter too, took them long enough I suppose I
should just use box-sizing instead !
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 9:54 PM
crestchristop...@gmail.com mailto:crestchristop...@gmail.com
Why is it adding 4px for left and right ?
I'll change my max-width to min-width.
When you say percentages for widths, you prefer to instead of using
pixels for a box, use percentages ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 10:24 PM
crestchristop...@gmail.com mailto:crestchristop...@gmail.com
There is a way of thinking with this min-width because everything after
changing from max-width has reversed. Instead when the view-port is
larger the block should become larger instead it's shrinking for mobile,
I'm doing something wrong !
Christopher
Tom Livingston
You set a max-width percentage width, thanks for the tip !
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 10:39 PM
Yes, for major structure elements.
You can set a max-width if you desire so your page (or page elements)
will not get too wide.
Like:
wrapper{
I'm styling for mobile and desktop. My priority is mobile ! When you
say your styles need to be in the right order, you mean put the Mobile
MQ above the desktop MQ, correct ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 10:47 PM
Just changing your MQs isn't
That I am doing. I want to get a foundation for how larger screens will
handle which is easier when you go larger.
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 10:54 PM
basically. You would style for 'phone' size first, then add and change
for larger
22 matches
Mail list logo
