css3 | Austin Drupal Development and Support | Drupal Development | Drupal Module Developer Austin TX

Category Archive for: css3

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Iron Man’s Arc Reactor Using CSS3 Transforms and Animations

Alright Iron Man fans, fire up your code editors! We are going to make the Arc reactor from Iron Man’s suit in CSS. Here’s what the end result will look like: See the Pen Iron Man’s Arc Reactor by Kunal Sarkar (@supersarkar) on CodePen. The Full Page Wrapper We will make our Arc reactor on a dark full-page background. Here’s our code to make a full page wrapper element: body { margin: 0; } .fullpage-wrapper { height: 100vh; background: radial-gradient(#353c44, #222931); } Why do we declare no margin on the body? The <body> element has some margin set to it by default in the user agent stylesheet. This prevents the elements inside the <body> to touch the edges of the screen. Since we want our wrapper to cover the entire screen, edge to edge, we removed that default margin on <body> element by setting it to 0. We’ve given our…

Read More →

WEB QUALITY ASSURANCE (QA) ENGINEER – University of Washington – Seattle, WA

Proficient in PHP, HTML5, CSS3 and JavaScript, Drupal. Collaborate with front-end and back-end developers, web designers, business analysts and project managers…From University of Washington – Wed, 07 Mar 2018 00:49:49 GMT – View all Seattle, WA jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Complexity

Frank Chimero published a new talk-turned-essay, Everything Easy is Hard Again. May we all be as wonderfully self-reflective and eloquent as Frank one day. There is a lot there, so please read it. Part of the theme is that web design and development has seemingly repetitive cycles that can kick even quite experienced people back down the ladder: I don’t feel much better at making [websites] after 20 years. My knowledge and skills develop a bit, then things change, and half of what I know becomes dead weight. This hardly happens with any of the other work I do. And complexity is to blame. Complexity is one of those in the water topics right now. Kevin Ball wrote “we are in the midst of a massive and rapid period shift in complexity from the backend to the front.” Roneesh just celebrated untangling all this front end complexity in his own…

Read More →

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX – obj.offsetLeft – (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY – obj.offsetTop – (h / 2) * (h > w ? (w…

Read More →

One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can be far more than just bold and normal—most professionally designed typefaces are available in variants ranging from a thin hairline ultralight to a black extra-heavy bold. To make use of all those weights, we would need a separate file for each. While a design is unlikely to need every font-weight, a wider variety than bold and normal adds visual hierarchy and interest to a page. The Google Fonts GUI makes clear: the more weights you choose, the slower your site There’s more than various weights to consider. CSS3 introduced the font-stretch property, with values from ultra-condensed to ultra-expanded. Until now,…

Read More →

How the Roman Empire Made Pure CSS Connect 4 Possible

Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. “Pure CSS” demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. CSS and HTML preprocessors also helped the scene move forward. Sometimes preprocessors are used for hardcoding every possible scenario, for example, long strings of :checked and adjacent sibling selectors. In this article, I will walk through the key ideas of a Pure CSS Connect 4 game I built. I tried to avoid hardcoding as much as I could in my experiment and worked without preprocessors to focus on keeping the resulting code short. You can see all the code and the game right here: See the Pen Pure CSS Connect 4 by Bence Szabó (@finnhvman) on CodePen. Essential concepts I think there are some concepts that are considered essential in the…

Read More →

The CSS attr() function got nothin’ on custom properties

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn’t know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element. It’s like this: div::after { content: attr(data-whatever); } That’s certainly interesting. You could use it for (rather inaccessible) tooltips, for example: <button data-tooltip=”Information only mouse-having sighted people will see.”> Button </button> button:hover::after { content: attr(data-tooltip); /* positioned and styled and whatnot */ /* ya, a :focus style would buy you a tad more a11y */ } But you can’t put HTML in the attribute value, so those tooltips are limited to a string value, and couldn’t have a title, link, or anything like that inside them. Here’s a better use case. There is an…

Read More →

Web Developer, Front-End – George Washington University – Foggy Bottom, MD

Drupal 7 experience (required). Experience building responsive websites using Drupal CMS , HTML /HTML5, CSS /CSS3, and JavaScript/jQuery….From George Washington University – Mon, 21 Aug 2017 16:25:18 GMT – View all Foggy Bottom, MD jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Front End Developer – R2integrated, LLC – Maplewood, MO

REQUIRED KNOWLEDGE, SKILLS, AND ABILITIES 3-5 years of experience with HTML5, CSS3, and Adobe Creative Suites (Photoshop, Dreamweaver, Illustrator, Fireworks)…From R2integrated, LLC – Tue, 15 Aug 2017 17:25:28 GMT – View all Maplewood, MO jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Five Huge CSS Milestones

CSS is over 20 years old now. I’ve only been using it for a little more than half that. In my experience, the biggest things to happen to CSS in that time were: Firebug Chrome CSS3 Preprocessing Flexbox & Grid And there is plenty more changes to come. Direct Link to Article — Permalink Five Huge CSS Milestones is a post from CSS-Tricks Source: CssTricks

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type=”email”>) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that have errors on them with the :invalid pseudo-selector, but you can’t style the error messages themselves. Behavior is also inconsistent across browsers. User studies from Christian Holst and Luke Wroblewski (separately) found that displaying an error when the user leaves a field, and keeping that error persistent until the issue is fixed, provided the best and fastest user experience. Unfortunately, none of the browsers natively behave this way. However, there is a way to get this behavior without depending on a large JavaScript form validation library. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript (You…

Read More →

Drupal Developer (Module) – Hendall Inc. – Rockville, MD

Experience creating custom Drupal modules. Experience building responsive websites using Drupal CMS, HTML/HTML5, CSS/CSS3, and JavaScript/jQuery….From Hendall Inc. – Thu, 01 Jun 2017 17:13:57 GMT – View all Rockville, MD jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong. The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). These two are stacked one on top of each other (they completely overlap). Then the pseudo-element with the white text above gets clipped to the shape of the black dress. However, this means we need to change the clipping path if we change the image and, at this point, it’s anything but easy…

Read More →

Web Developer – American Association for Cancer Research – Philadelphia, PA

Knowledge of common CMS platforms (WordPress, Drupal). Writing exceptional code using MVC platforms with developer expertise in both front end (JS/HTML5/CSS3)…From American Association for Cancer Research – Wed, 03 May 2017 20:46:12 GMT – View all Philadelphia jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Web Developer – Youngstown State University – Youngstown, OH

Programming competence in PHP , HTML 5, CSS3, Drupal 7 knowledge, existing experience in accessibility, security, staging workflows desirable….From Youngstown State University – Wed, 29 Mar 2017 19:06:14 GMT – View all Youngstown jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Web Developer – Rutgers University – New Brunswick, NJ

Requires strong and demonstrated knowledge of HTML /HTML5, JavaScript, jQuery, JSON , CSS /CSS3, Drupal 7/8, Swift, Java, Objective-C, PHP languages and of…From Rutgers University – Tue, 28 Mar 2017 16:42:17 GMT – View all New Brunswick jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Java UI Developer – Sriven Systems Inc., – Iowa City, IA

* JavaScript * CSS3 * HTML5 * MVC * JQuery (must be able to write JQuery) * Bootstrap Other front-end frameworks are a plus: * Foundation * Angular * Dust *… $90,000 – $100,000 a yearFrom Indeed – Thu, 23 Mar 2017 21:15:34 GMT – View all Iowa City jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Text Stroke: Stuck In The Middle With You

There is a non-standard way to stroke HTML text (SVG has a standard way). It’s not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example: span { -moz-text-fill-color: #fde; -webkit-text-fill-color: #fde; -moz-text-stroke-color: #666; -webkit-text-stroke-color: #666; -moz-text-stroke-width: 2px; -webkit-text-stroke-width: 2px; } And she’s right: This CSS isn’t fully-baked or fully-supported. But it’s good enough to be used today, especially since it’s simply offering a visual enhancement. It’s not mission critical to making a website usable. I’d only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports to be extra sure it’ll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color) : @supports ((-webkit-text-stroke-color: #666) and (-webkit-text-fill-color: white)) or ((-moz-text-stroke-color: #666) and (-moz-text-fill-color: white)) { span { -moz-text-fill-color: white; -webkit-text-fill-color: white; -moz-text-stroke-color:…

Read More →

Back to Top