Kantige, runde Ecken

Kantige, runde Ecken

Bevor ich mich gleich auf die Couch werfe, um die ganzen verpassten "The Big Bang Theory"-Folgen aufzuholen, versuche ich Stefan zu erklären, was es mit den abgerundeten Ecken und dem Hintergrund-Effekt der Links unter den Artikeln auf sich hat.

Hierbei handelt es sich um gar nicht so große CSS-Magie: CSS3-Transitions und dem eigentlich schon recht alten border-radius. Folgender Code-Schnipsel sollte eigentlich auch schon recht selbsterklärend sein:

a {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
}

a:hover,
a:focus {
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-property: background;
	-moz-transition-duration: 0.3s;
	-moz-transition-timing-function: ease-in;
	transition-property: background;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
	background-color: #009cff;
	color: #fff;
}

Die Präfixe (-moz- und -webkit-) für ältere Mozilla- bzw. Webkit-Browser wie Safari sind nur zur breiteren Unterstützung enthalten.

Für abgerundete Ecken benötigt man nur die Angabe für border-radius. In meinem Fall sind das 5 Pixel für alle Ecken.

Für den Übergangseffekt, wenn man mit der Maus über die Links fährt, verwende ich die CSS-Eigenschaft transition. In meinem Fall bezieht sich transition auf den Hintergrund, dauert 0.3 Sekunden und der Wert "ease in" beschreibt die Kurve, wie der Effekt zeitlich verläuft.
Noch Fragen?

What’s New in Sencha Learn?

Over the past few weeks, we’ve produced a host of new educational material for our new Learning Center.

The Learning Center is where we host graded tutorials, FAQs, webinars, and screencasts for all of our products. It is designed to complement the frameworks’ API documentation (where you’ll find the canonical guides to using each and every package, guide, and class), and is where we encourage community members to get involved with sharing their experiences.

RSS The Center has an RSS feed for new entries, but we thought we could also give you a quick update on a few of the recent highlights.

New Tutorials

Ext Designer 1.2 beta Overview First up is last week’s webinar: the Ext Designer 1.2 beta Overview. This is a great introduction to, and demo of, this new version. We record and publish all of our webinars, since we know not everyone can attend at the time: last month’s Theming Sencha Frameworks with Sass and Compass is also up on the site.

Sencha Touch Forms tutorial As well as videos, we’re creating dedicated curricula of screencasts for the Learning Center. Our most recent episode, from Drew Neil, covers working with Sencha Touch Forms and is an excellent introduction to data binding in an MVC pattern.

Ext JS 4's Docked Items tutorial One of our most active community members, Jay Garcia, has been busy in the screencast studio. Check out his newest: a tour through Ext JS 4’s Docked Items.

Ext JS 4 tutorial by Tommy Maintz If you’re a newsletter subscriber, you’ll get early access to many of our tutorials and articles. For instance, we’ve been running an epic series from Tommy Maintz on architecting Ext JS 4 MVC apps (and part two). These are now available for general access. And of course stay tuned for part three by signing up in the sidebar on the right or in the newsletter subscribe form at the bottom of our website.

Sencha Touch and PhoneGap tutorial One of the Learning Center’s most popular tutorials ever is ‘A Sencha Touch MVC application with PhoneGap‘. The popular library recently reached its v1.0, and to celebrate, we gave the article a big overhaul. It also now covers using XCode 4.x and Weinre.

Sencha Touch and NimbleKit tutorial Staying on the hybrid native/web topic, we’ve also been playing with NimbleKit, which provides a selection of interesting iOS APIs that can be used in Sencha Touch. Our two-part article on the topic demonstrates how to embed internet radio and camera integration into a simple web app. Very cool.

New Guides and Getting Started

For those exploring our new Sencha Touch Charts package, you’ll find three new guides on the SDK: the basics, interactions, and theming. Stay tuned for more dedicated tutorials on what we think is a truly unique mobile visualization package.

Or are you still just dipping your toes into Sencha Touch? For beginners and hackathon contestants alike, our new Quick Start guide should prove useful. We’ve also got a new Sencha.io Src guide, which takes you on a gentle, but comprehensive, tour of the cloud API’s syntax.

Finally, have you noticed the GitHub links on many of the tutorials and screencasts? We know how helpful it can be for you to get into a topic quickly without having to copy and paste endless fragments of code. Take a look at the working repos on our Sencha Learn GitHub account, fork ‘em, hack ‘em, go crazy.

That’s it for this month. As ever, let us know how you get on with the resources. And good luck on your Sencha adventures!

from Sencha Blog: http://www.sencha.com/blog/whats-new-in-sencha-learn/#date:20:00

HTML5 Boilerplate hits 2.0!

  • We shifted to using normalize.css instead of the bulldozer reset.css and base approach. This ends up being smaller, faster, and easier to develop with.
  • IE6 users will now be prompted to install Chrome Frame by default. Its time. :)
  • The build script continues to get massively improved: any css @imports get inlined into your file before it gets concatenated with other files and minified together, the application caches manifest is generated automatically for you if you want to take your app offline, also this whole build process is way faster now.
  • Build script also has optional tasks for CSSLint, JSHint, splitting your CSS into modules, and more customizability.
  • Added respond.js to allow true responsive development; use media queries with full cross-browser support now!
  • PNGFix, Handheld.css removed along with lots of other smart removals. The full h5bp payload is now smaller and faster than ever.

via HTML5 Boilerplate hits 2.0! « Paul Irish.

HTML5 Reset

Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We've been using these files for a long time and we've progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for an update, and we thought we'd put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it's a fairly good starting place that anyone can take and make their own.

via HTML5 Reset.

« Ältere Kleinigkeiten