CSS3

iOS Applications with HTML5 and CSS3 {9}

by Jenifer W

iOS Applications with HTML5 and CSS3

Today, mobile application (app) development has become one of the most popular trends in software development as we emerge ourselves into an on the go, handheld device era. “A few short years ago, most mobile devices were, for want of a better word, ‘dumb’” (Charland & LeRoux, 2011). Now, mobile devices have advanced so much that it can take away much of a person’s daily usage of a desktop or laptop. “Mobile apps are currently evolving very rapidly but generally are targeted at a specific task, run on a mobile device, make heavy use of the data network, and have a simple delivery mechanism (i.e., Google Play Store or Apple Store)” (Tracy, 2012). Mobile applications can be used in a variety of operating systems such as the iOS, Android, Blackberry OS, Windows Phone, and much more. To develop a mobile application, a basic knowledge of one or more programming languages is needed. This blog will focus primarily on the development of iOS applications using HTML5 and CSS3. Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) are the core components in web development that have evolved tremendously over the past years. “Web design is becoming more sophisticated, with new browser techniques and design principles, including fluid grids, flexible images and media queries, making it possible to deliver a quality experience to users no matter how large (or small) their display” (Reyna 2012). The latest versions of the previously mention web development languages are HTML5 and CSS3. With the launch of HTML5 and CSS3, these two languages have opened a new form of computing: the ability to create iOS applications using HTML5 and CSS3 in native and web applications. read more...

Responsive Web Design {9}

by Edward J
Making software easy to use has been a major focal point for developers since the dawn of the microchip.  Whether or not an application or website is successful often depends on how quickly users come to familiarize themselves with an interface.  Applications that inundate users with too many buttons or options often struggle to find a wide user base. Similarly, websites that are ‘clunky’ or difficult to navigate are often left in the dust.  Even sites with solid accessibility but that are visually unappealing will find themselves with a timid following. These two issues have historically been major pains for programmers and developers who are trying to add mobile functionality to their software.  Now with the advent of CSS 3 modules, it is easier than ever for developers to provide media rich content that is customized for any type of mobile device; tablet smart phone or otherwise. read more...

Tips and Tricks for Interactive CSS/jQuery {4}

by Jamal A
The article I read talks about how easy it is now to create unique interactive websites than ever before with the help of CSS3 and JavaScript. There are five interactive techniques that were mentioned in this article: “Animated text effects”, “Animated images without GIFs”, “More engaging drop-down menus”, “Fancier slideshow navigation”, and” Animated icons”. To show how to animate text author used a line of code: “<span class=”extruded”>Extrude Me</span>”. According to the author, the interactive text effect is quick and impressive way to add some flare to a website. However, the author point out that with only a few lines of CSS3 codes, one can make the text appear to pop out of the page in three dimensions. However, while one can easily animate text with a few lines of code, animating an image usually requires animated GIFs or Flash or HTML5 video. However, author mentioned another way to create animations by creating a compelling illusion of animation using CSS alone. The trick is to use a transparent PNG with a background color. The color of the PNG should match the website’s background, so that all of the transparent areas in the PNG show up when filled with a background color. Thus, the PNG should contain the negative space of the image you want to display (i.e. the shape you want should be transparent, and everything else should be the same color as the background). Moving on, the author also mentioned that there is one common design problem that many web designers don’t realize when they are writing codes. The mistake is that they often contain a lot of items in a long single column. However, instead of presenting all of its items in a long single column, one can use a different approach called “Bohemia Design” which is a multi column dropdown approach. This approach not only looks great, but provides an opportunity to group the links and highlight the most important ones. read more...

CSS3D {5}

by Daniel M
The article that i read was about using CSS3 to render 3D web pages. Basically with the use of CSS3 and jQuery web developers have started to be able to add a third dimension to web pages and web programming. The article said that it is very labor intensive and is not really out there for full use yet but developers have been playing around with it and are able to make websites that use a Z axis. The website that the article was specifically written about was for beer camp 2012 (http://2012.beercamp.com/). The created a pop-up style book that allows you to turn pages and rotate the book to see it at different angles. The new part of CSS3D is that it allows for rotation of objects in what they are calling the gamma direction or the Z-axis. You then have to set the depth that you want the object using depth-sorting. The article talked about how each browser renders the depth differently so at this point the depth function is a little buggy. The article did talk about how mobile browsers are capable of rendering 3D extremely fast and with very little depth-sorting issues. read more...

HTML5 and CSS3 {1}

by Daniel M
The article that i read was about the use of HTML5 and CSS3 together. The first thing to note is that HTML5 will load pages much faster due to the fact that it uses webSockets. WebSockets basically will allow for more live interaction between the browser and the web page and this will allow for the real time creation of games and videos. Also like a lot of other people are talking about, HTML5 allows for mobile devices to play videos without plug-ins and without the need to write phone specific code. HTML5 builds on top of HTML4 so most of the tags are the same except for a few new ones and a few tags that got replaced. As far as CSS3 goes, it is not supported by all browsers yet but CSS3 will allow you to make changes to your website similar to what you could do using javaScript without the need for javaScript. According to the article, CSS3 will allow for such features as text shadowing, Rounded corners, this feature get rid of those sharp corners without using images. You can also do multiple backgrounds overlaid over each other. You can now add new fonts if you want. CSS3 also allows you to submenus upon hovering, horizontal menus, menus with rounded edges, submenus with tabs, submenus with descriptions. CSS3 with HTML5 seems to allow an almost infinite amount of options. read more...

Want to dress up your menu items using CSS3? {1}

by Chris S
The article I read was more of a tutorial than a blog or article, however, it still provided some very useful information on how to drastically improve your website menu items visually by using CSS3. Currently we are learning about CSS and how to use it in my web development class, so I understand a little how it works. With CSS3 you can do so much to your website by adding stunning animated menus that are far from boring and typical. Creating menu items that overlap each other but scale to the top when hovered over can make your website much more appealing to users who visit it. One example used a heart image about the menu item text and when hovered over contained an animated heart-beat effect. Little tips and tricks like the two provided are just a couple out of many ways to improve on making your website not only look good, but more interactive for the user. When developing websites, traffic is the main focus and if you are able to draw a lot of people to your site, well then you did a good job. read more...