Re: [css-d] CSS inch?
On Aug 3, 2014, at 10:44 PM, Karl DeSaulniers wrote:
> On Aug 4, 2014, at 12:39 AM, Christopher Schmitt
> wrote:
>
>>
>> On Aug 3, 2014, at 10:28 PM, Karl DeSaulniers wrote:
>>
>>> Can you use "in" for inches in css or is that just jQuery that does that?
>>
>> Yes, you can use “in” for inches CSS, but it’s probably not the best for
>> digital design.
>>
>> An inch for print is good since it’s easy and repeatable to measure an inch
>> on paper.
>>
>> For the different types of screens and resolutions out there—I don’t think
>> you would get the same distance or rely on getting the same distance from
>> smartphone to tablet to desktop, etc.
>>
>>
>> Best,
>> Christopher Schmitt
>
> Thanks Christopher. That is what I figured. Wasn't sure of a real case
> scenario that I would do inches except maybe an online proofing website or
> something that dealt with print pieces.
> Was more curious because I saw this code on the jQuery animate page and
> didn't know if this was a standard with css or something jQuery was providing
> for their user base as a convenience per se.
>
>
> // Using multiple unit types within one animation.
>
> $( "#go" ).click(function() {
> $( "#block" ).animate({
>width: "70%",
>opacity: 0.4,
>marginLeft: "0.6in", < saw this
>fontSize: "3em",
>borderWidth: "10px"
> }, 1500 );
> });
>
Definitely take that demo with a grain of salt.
:) It’s trying to tell you it can move an element, but it’s not the best unit
to use to do that.
Hmm… Might be worthwhile to ping them to see if they can update the example
with a different value.
C.
__
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-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS inch?
On Aug 3, 2014, at 10:28 PM, Karl DeSaulniers wrote: > Can you use "in" for inches in css or is that just jQuery that does that? Yes, you can use “in” for inches CSS, but it’s probably not the best for digital design. An inch for print is good since it’s easy and repeatable to measure an inch on paper. For the different types of screens and resolutions out there—I don’t think you would get the same distance or rely on getting the same distance from smartphone to tablet to desktop, etc. Best, Christopher Schmitt +1-513-374-1885 @teleject -- Attend the Front End Summit http://frontendsummit.com/ Online, live web building tools conference August 21, 2014 __ 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-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opacity question...
On May 24, 2010, at 3:26 PM, Christopher Schmitt wrote:
>
> On May 24, 2010, at 2:39 PM, Eric A. Meyer wrote:
>
>> At 3:34 PM -0400 5/24/10, Matthew wrote:
>>
>>> I am wrestling with setting the opacity on background colors on a
>>> div to expose a pattern behind it. However I can't figure out how to
>>> keep the elements contained with in it at 100% opacity. Please see
>>> this page to see what I mean:
>>>
>>> http://em-w.com/portPages/port_homeandhearth1.html
>>>
>>> I would like the main image and the text to remain a solid color,
>>> while the white background has a 50% opacity level.
>>
>> div {background-color: rgba(255,255,255,0.5);
>>
>> That won't work in IE/Win, I believe, but it will in pretty much
>> anything else of recent vintage. Alternatively, you could create a
>> smallish PNG which is all white and has 50% opacity and drop it into
>> the background of the div. That will work in all current browsers
>> including IE/Win.
>
> Also, you can use IE filter for gradients, which allow for opacity:
>
> div {
> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
> endColorstr=#6600 ); }
Should be #00 is the color and the first hexadecimal value is the color
opacity.
Thanks to Claude for the reminder :)
> Best,
> Christopher Schmitt
> http://www.christopherschmitt.com/
> Web Design Specialist
> --
> Attend the online CSS3 + July 4 + HTML5 Presentation
> http://css3flag.eventbrite.com/
> Free on July 1, 2010
__
css-discuss [cs...@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-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opacity question...
On May 24, 2010, at 2:39 PM, Eric A. Meyer wrote:
> At 3:34 PM -0400 5/24/10, Matthew wrote:
>
>> I am wrestling with setting the opacity on background colors on a
>> div to expose a pattern behind it. However I can't figure out how to
>> keep the elements contained with in it at 100% opacity. Please see
>> this page to see what I mean:
>>
>> http://em-w.com/portPages/port_homeandhearth1.html
>>
>> I would like the main image and the text to remain a solid color,
>> while the white background has a 50% opacity level.
>
> div {background-color: rgba(255,255,255,0.5);
>
> That won't work in IE/Win, I believe, but it will in pretty much
> anything else of recent vintage. Alternatively, you could create a
> smallish PNG which is all white and has 50% opacity and drop it into
> the background of the div. That will work in all current browsers
> including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
#66FF00 would be the hexadecimal color. Then the last hexadecimal value would
be the opacity of the color.
Hope this helps!
Best,
Christopher Schmitt
http://www.christopherschmitt.com/
Web Design Specialist
--
Attend the online CSS3 + July 4 + HTML5 Presentation
http://css3flag.eventbrite.com/
Free on July 1, 2010
__
css-discuss [cs...@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-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling forms
On Aug 11, 2009, at 12:25 PM, Krystian - Sunlust wrote: > Hi, maybe this isn't 100% CSS question, but I'm looking to build a > simple contact form, name, email, message and submit button (maybe > captcha too, but optional). > > The thing is that no matter how I construct a form it displays wrong, > either in FF, IE7 or IE8. > > I've found some tutorials on Google, but they don't display right on > ie8 or I simply can't adapt them. Styling of web form elements consistently is very improbable. I created a collection of Web forms: http://webformelements.com/ looking how browsers handle the styling of Web forms. Browsers vendors don't agree on how to render forms and the W3C spec doesn't spell out how they should be designed. Result? Not so good. Best, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati -- Register Now for The DIY Summit! 8 Speakers Offering Design Solutions for the One-Person Web Team September 17, 2009 • 9am - 6pm CT • Online http://diysummit.eventbrite.com/ __ css-discuss [cs...@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-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Percentage width for input type=file
On Jun 30, 2009, at 12:57 PM, Nick Fitzsimons wrote: > Roger Johansson has a large collection of screenshots at > <http://www.456bereastreet.com/lab/styling-form-controls-revisited/file-select/ > > >. > In particular, consider what a standard Safari is > going to look like stretched to 100% width: > <http://www.456bereastreet.com/lab/styling-form-controls-revisited/file-select/#safari2 > > >. > (It may not be clear from that screenshot, but when a file is > selected, its filename, not including the full path, will take the > place of the text "No file selected".) I think it's probably going to > have a lot of white space around its two components... I also have a collection of form elements and how CSS properties effect their rendering at http://webformelements.com/ For the File Upload and the width property, you can check out 22 browser renderings here: http://www.flickr.com/search/?q=fileupload%20width&w=all&s=int Hope this helps! Best, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati -- Attend the CSS Summit and cure your Web design headaches June 18th, 2009 Online from 9am to 6pm ET http://CSSSummit.com/ __ css-discuss [cs...@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-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling submit buttons with images
On Apr 21, 2009, at 5:51 PM, Tom Dell'Aringa wrote: > It's been quite some time since I styled a form, and I'm not up on the > latest techniques. We want to use images for our submit buttons, and > have > them be rollovers. I'd like to avoid using javascript if possible, > and have > them degrade gracefully to HTML buttons. Is there a preferred method > for > this? Are you forgoing have a traditional submit button for a traditional A HREF? Best, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati -- Attend the AIGA In Control Web Design Workshop Conference June 11-12th, 2009 Art Academy in Cincinnati, OH http://InControlConference.com/ __ css-discuss [cs...@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-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] American Flag
On Jul 9, 2008, at 4:56 PM, Christopher wrote: > This looked neat, but in Opera and FF3.0 I could not view it. That's weird. I took screenshots of both Opera and FF3 before I posted the CSS flag. You can see them here: FF3: http://ion.christopherschmitt.com/cssflag/cssflag_firefox3.png Opera 9.5: http://ion.christopherschmitt.com/cssflag/cssflag_opera9-5.png > Tim Dawson wrote: >> David Laakso wrote: >> >>> Christopher Schmitt wrote: >>> >>>> I forgot to mention this during the holiday, but for the 4th of >>>> July >>>> I made the US flag out of CSS starting with semantic HTML. >>>> >>>> You can view the finished flag here: >>>> >>>> http://ion.christopherschmitt.com/cssflag/step9.html >>>> >>>> Or you can read the tutorial here: >>>> >>>> http://christopherschmitt.com/2008/07/03/american-flag-in-css/ >>>> >>>> I would like to hear anyone's thoughts on it--good or bad or how to >>>> improve upon it. >>>> Best, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] American Flag
I forgot to mention this during the holiday, but for the 4th of July I made the US flag out of CSS starting with semantic HTML. You can view the finished flag here: http://ion.christopherschmitt.com/cssflag/step9.html Or you can read the tutorial here: http://christopherschmitt.com/2008/07/03/american-flag-in-css/ I would like to hear anyone's thoughts on it--good or bad or how to improve upon it. Thanks, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
