webkit

Theme 03 || C R O S S R O A D || by Shufee Themes

Static Preview || Code

Minimalistic theme with sidebar. Idk I really like crossing lines :) Don’t forget to fill the update tab if you plan on using it. If you have any questions ask here. Here are some features:

  • 400/500px wide posts
  • 5 custom links
  • custom ask page url
  • reblog button
  • optional title
  • optional update tab
  • drop-down tags
  • customizable colours
  • webkit scrollbar and tooltips

RULES:
Do not redestribute, claim as your own, remove the credit, use as a base
Edit how much you want but DO NOT remove the credit
Like / reblog if planning on using, please <3

[THEME 07 - “SENKETSU”]

Static Preview | Pastebin | FreeTextHost

(Reblog this post if you are using this theme!)

Features

  • 400 Size Posts
  • 500 Size Posts
  • Caption Selector
  • Sidebar Image
  • Custom Icon
  • 3 Page Navigation Bar
  • 6 Custom Side Links
  • 4 Standard Home Buttons
  • Full Colour Control
  • Webkit Special Effects!!

Credits

Thank you & Enjoy!

(pst, let me know if there are any problems!)

WebKit Filter properties

Recently,most of the theme makers are using different kinds of filters to give different styles to their themes or their own blogs. How many themes have the option for Grayscale Photos and Photosets,right? Other theme makers use the Blurfilter to make a cool effect,also. So I’d like to present all the properties WebKit filters can offer.

  • Grayscale
    Most theme makers are using it now to make more monochrome themes.But if you’d like so,you can make a balance of it:Instead of only colors or grayscale,you can make the photos “kind of” grayscale, just by using .5 or .3 instead of only 0 or 1.
  • Blur
    Another filter frenquently used,makes your layout more unique. On this case,you won’t use just 1 or 6, you must put px after the value.For example: blur(2px).
  • Sepia
    Just like the name says, this filter allows you to give the photos a old look. To use it, you just have to put values like the ones on the grayscale filter.
  • Saturate
    This one is not really used much with CSS, but those who make graphics probably understands what it means. On this one, you use numbers like 2 or 4 to increase the saturation.
  • Opacity
    All kinds of themes use this filter, this allows you to make the elements more transparent  so you can see what’s behind it, or even make hidden elements. Like grayscale, you’ll use values from 0 to 1.
  • Brightness
    Also, like the name says, this filter allows you to make the brightness of a image or anything else more intense. Also uses values from 0 to 1.
  • Contrast
    This one now allows you to give your elements a normal or intense contrast. It may be a interesting filter to make more colorful themes. Values variate from 0 to 1.
  • Hue-rotate
    Another exception,instead of 0 to 1,you can use a whole number,but using the deg unit,like this: hue-rotate(120deg). This one allows you,how you can see, to rotate elements, making different effects and forms for your themes.
  • Invert
    Another interesting effect,it inverts the color scheme of your photos.Most cellphone cameras these days have this effect too. Also use it with values from 0 to 1.

How can I use it?


All these filters can be really useful to create various effects, but how to use it?
After creating the element you’d like to customize with these filters, add on the bolded part:

.example_box { background-color:white; width:30px; height:30px; -webkit-filter:blur(2px) grayscale(.5) saturate(6);;


You can substitute the italic parts for the filters and values you’d like to use, since this was just an example. So,basically,you have this :

-webkit-filter: filter name(value);


If you still can’t understand what I mean,you can acess this site: davidwalsh, that explains the properties.
NOTE:These are WebKit Filters. It won’t work on all browsers.  I’d highly recommend you to use Chrome.
In case you’d like to use the grayscale filter,many theme makers have a cross-browser code for it on their blogs. Just look at their resources!

Fixing the background 'bleed'

I recently came up against an issue in Safari where the background colour of an element seemed to ‘bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). After seeing David Cole tweet about the same issue I resolved to find a solution, and it came in the form of the -webkit-background-clip property.

-webkit-background-clip: padding-box;

It’s important to note that if you are using the shorthand notation to specify your other background properties then this should be added after those. It seems that the shorthand notation implies a default clip value which will override one that’s previously set. Your mileage may vary, but it worked a treat for me. Read more about the available values for the property here.

Update: This post has been generously translated into Bulgarian by Albert Ward.

Does WebKit darken ::selection?

Selection in WebKit (Chrome and Safari).

Selection in Internet Explorer 9, Firefox, and Opera.

I want it to appear the bottom color, what can I do?

2

Theme Ten

i don’t know how, but i’ve officially posted ten whole themes to this blog. i tried to be a little more creative with this one, and think it turned out pretty well, if i do say so myself. it has a hit counter and online user display already in the code. if you use it, let me know how you like it!

preview one ◊ preview two ◊ code

400px posts
up to 10 links
side picture
all kinds of color options
background cover/tile
separate bg image option for sidebars
webkit scrollbar

Rounded Sides/Borders

Part 1

The rounded borders are like the ones you see on my blog.

Here’s the code:

-moz-border-radius: 10px;
border-radius: 10px;

If you want to round your side bar look for a code like this: #side{…..} and place the above code between the brackets.You can pretty much use it anywhere.
The larger the px the more round it is.

Part 2:

You can make one or two sides rounded and leave the rest un-round.

  • Top Left:

border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;

  • Top Right:

border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;

  • Bottom Left:

border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;

  • Bottom Right:

border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;

If you want the top left and right rounded, you’ll need to add both of the codes and same goes with any other.

Part 3

You can make different angles for the border:

Photo Credit: cutesecrets.me

**NOTE! There is no border code (EX.border:1px dashed #000;) requirement for this code to work. It’ll work perfectly fine as long as you have a background. :)

In certain versions of Webkit a comma is automatically added to input fields with the HTML5 attribute type="number". In most situations a thousands separator is a nice visual device, but it’s not really applicable to numbers like ZIP codes. In the meantime, there is a workaround until the webkit team addresses the bigger issue.

Personally, this one might be worth waiting out. I’m not sure which option I like least, unintended formatting or using the type="text" attribute for a number field.

Web Notifications

One of the traditional advantages of native apps over the Web is that they can access the platform’s built in notification system. Mobile operating systems generally have their own baked in, while desktop OS like Mac OS X have commonly found 3rd party notification systems such as Growl.

In the near future, we should be able to take advantage of this kind of functionality in our web apps as well. The Web Notifications specification provides us with this ability. This defines what are known as simple notifications. With simple notifications it is possible to create a notification which contains an icon, title, and body test. This can then be displayed by the notification system that the browser/user-agent hooks into. The spec doesn’t define this, so the user-agent can either roll its own, or use an existing system made available by the operating system.

Keep reading

The Glow Effect Around Borders/Edges

This code is great if you want to emphasize a picture, your sidebar, or pretty much anything. It gives a glowing effect and you pretty much have full control of it. :)

The code goes in between your <body> and <body> tags. If you want to emphasize your sidebar you’ll need to look for a code that looks like this:

and paste this code:

-moz-box-shadow: 0 0 5px #000;

-webkit-box-shadow: 0 0 5px #000;

You can always adjust the color and the px number. The larger the number the larger the glow is.

If you want to emphasize an image you’ll need to look for a code like this and add in that code above like this:

If you need more help, please message me and I will get back to you a.s.a.p. This code isn’t easy to use especially if you don’t have a lot of knowledge with css/html.

Manipulating automatically linked text on iOS in Mobile Safari and Mail

The Mail client on iOS automatically links street addresses. To style them, you can target them with this CSS:

a[href^="x-apple-data-detectors"] {
    color: inherit;
    text-decoration: none;
}

I discovered the callback URI by adding this CSS to an HTML email:

a:before {
    content: attr(href);
}

The attr CSS function is really useful when there’s no access to an HTML inspector or Javascript.

You can also disable the automatic linkification of phone numbers on iOS for an entire page with a meta tag:

<meta name="format-detection" content="telephone=no" />

To just style them, use this CSS:

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}
Some notes on bouncy CSS transitions
  • Earlier this year the CSS transitions specification was rewritten so that transitions with a custom timing function (using cubic-bezier) would no longer be clamped between the start and end values, making it possible to add a rubber-band bounce to your transitions. Opera and Firefox already implemented this, and recently the related WebKit bug was fixed, so we can start experimenting with bouncy transitions now!

  • This rubber-band bouncing doesn’t only work for things like position and transform, it equally applies to animated colors, shadows, borders, font-sizes, etc. Of course, transitions won’t extend across minimum or maximum values – you can’t go darker than rgb(0,0,0) for example.

  • If you need real bouncing though – with more than one bounce – you’ll still have to use keyframe animations, as cubic-bezier curves only take two user-defined control points. Dan Eden made a nice library of ready-made animations to drop into your project. Apparently browser vendors and spec writers are currently looking into defining more timing functions like bounce however.

  • If you want to play around with cubic-bezier curves look no further than Cubic-Bezier or Ceaser, two essential tools to comprehend and play with CSS timing functions.

두번째는 아마존의 웹킷 선택이다. 모바일 브라우저의 대다수를 차지하고 있는 웹킷을 선택함으로서 완전한 대세로 자리매김하게 될 예정이다. 모바일에서 또 다른 오픈소스 렌더링 엔진을 배포하고 있는 Mozilla의 입장에서는 조금 아쉬운 대목일수도…

클라우드 브라우저의 탄생

사실상 WebKit이 웹 브라우저 렌더링 엔진 세계를 지배한 지는 이미 오래되었다. 이렇게 된 데에는 이유가 다 있다. Gecko 엔진을 WebKit처럼 쉽게 붙일 수는 없다. Mozilla Firefox는 좋은 소프트웨어 제품이지만, Gecko 엔진만 따로 제품처럼 쓰기는 상대적으로 까다롭다. 반면 WebKit은 매우 쉽게 붙일 수 있게 되어 있다. 엔진 자체만으로 하나의 완결된 소프트웨어 제품이다. Gecko와 WebKit의 차이는 사용자 인터페이스(UI) 디자인이 아니라 API 디자인이다. UI가 안 좋으면 사용자들이 쓰질 않듯이, API가 안 좋으면 개발자들이 갖다 쓰려고 하질 않는다.1

물론 API가 좋다고 항상 승리하는 것은 아니다. API가 복잡해도 다른 제품에 비해 기능과 성능이 월등히 좋아서 어쩔 수 없이 쓰이는 라이브러리들도 있다. 하지만 Gecko가 WebKit에 비해 그런 확실한 우위점을 가지고 있냐고 하면… 그렇지 않은게 사실.

WebKit이 좋다고 찬양하는게 아니다. 나는 WebKit이 이렇게 잘되는 상황이 두렵기만 하다. 다가올 10년은 IE의 자리를 WebKit이 차지할 것이라고 생각한다. 이미 몇년 전부터 WebKit에서만 잘 나오면 땡이라는 웹 개발자들의 인식이 널리 퍼져있는 상태다. Google Chrome은 자기네 편한대로 웹 표준과 상관 없는 기능들을 때려넣고 있다. 좋지 않다. 렌더링 엔진 간에 마켓 밸런스가 맞아야 웹이 발전할 것이다. Mozilla의 목표가 바로 그런 것이라고 알고 있다. 그 목표를 잘 수행하려면 Mozilla Firefox의 UI를 개선하는 것도 중요하지만 Gecko 엔진의 API를 개선하는 것도 굉장히 중요하지 않나 싶다.


  1. WebKit이 나중에 나왔고 Gecko 디자인의 좋은 점과 나쁜 점을 살펴볼 수 있었으므로 Gecko보다 WebKit의 디자인이 나은 것은 당연하다. 역사적인 이유가 있으므로 Gecko의 디자인을 그냥 비난할 수는 없다. Gecko가 없었다면 WebKit의 디자인이 지금의 Gecko와 같았을 것이다. 

Changing the 'Select' Color

Explanation: Whenever you select a text you get this blue background, now you can change the color of that. :D

Copy and paste this code and place it below the <style type=“text/css”>

::selection {

background: #fce2e8;

}

::-moz-selection {

background: #fce2e8;

}

You can change the color to whatever you want.

vimeo

Modern applications use Javascript. You can make rich user interfaces that are faster and more responsive.

Since we all do TDD, we need to test our Javascript. There are plenty of approaches. It used to be a pain, but there’s no excuse any more.

If you’re using Capybara to go through the UI of a modern web application, perhaps with Cucumber, there’s going to be Javascript in that UI and you need to run it.

The default driver for Capybara is Rack::Test, which is pretty simple. It can follow redirects and do 90% of what you need but the remaining 10% is the shiny part, the Javascript part.

As an example, say you have a form that uses Javascript to auto-fill an “account name” field based on what you fill in for the “email address” field. If you used Capybara with just Rack::Test, the integration test won’t pass.

Selenium runs your test in a real browser. Someone took the time to write software that starts up Firefox, which is hard enough as a user, installs an extension so you can remote control it, and exposes a JSON REST API so you can communicate with it from your tests. It works with Capybara. All of that’s awesome.

However, it’s slow. There’s also no real API for assessing what went wrong.

So, thoughtbot made Capybara Webkit.

Capybara Webkit is fast. It uses the Webkit engine, not a real browser UI. You can do console.log output. You can see errors in standard output.

It’s mostly easy to install.

Gemfile:

gem "capybara-webkit"

features/support/env.rb:

Capybara.javascript_driver = :webkit

However, you also have to install Qt. Instructions for OS X and Linux are in the README. If you’re on Windows, God help you.

Capybara Webkit is still young, however.

All the tests are asynchronous so you still need Capybara’s retrying methods.

It’s much younger than Selenium so there are some bugs that they’ve worked out that we haven’t. The issues queue is very active.

Capybara Webkit is built around a cool library called QtWebkit, which is a headless browser acting as a server that listens for commands using a lightweight socket layer. So when you boot up your test suite, that server also starts in a background process. Our Ruby driver implements the Capybara API and communicates with that server.

Webkit is open source, powers Safari, Chrome, and other browsers. It’s fast and standards-compliant.

It’s not a browser itself, and calling it a browser engine is even a stretch. It’s really a set of libraries for building a browser. It’s not packaged as a standalone library.

There is no ‘WebKit’ as a single library. We use QtWebKit because it’s the most complete at filling in the blanks to make a unified browser library.

Qt is a C++ library and a bunch of tools to make C++ development suck less.

QtWebkit appears like it was written so that Nokia could build a mobile Webkit browser. It has lots of injection points and hooks, a nice API, and is well documented. Webkit itself is not documented so this was a big win. Instead of building a browser with it, we used it to build a test harness.

Written by Dan Croak.