Web Designs | P&T IT BROTHER - Computer Repair Laptops, Mac, Cellphone, Tablets (Windows, Mac OS X, iOS, Android)

HTML img tag – How to make a hyperlink on an image

P&T BROS — Tue, 08 Sep 2015 20:44:23 +0000

Today, We are going to share how to add a hyperlink to an image using HTML image tag. You can also add border line or adjust the size of an image using some other extra tags.

a href: This is the address to link

width: You can adjust the width of an image

height: You can adjust the height of an image

Border: You can add a border line to outside of an image.

An example:

How to make transparent text effect – Adobe Photoshop CS6

P&T BROS — Tue, 08 Sep 2015 17:14:55 +0000

If you are looking for how to create a transparent text effect using Adobe Photoshop CS6, you got the right place! Today We are sharing how to apply transparent effect on text layer in Photoshop. We prepared an easy pictured guide to follow. Hope it helps!

Step 01. First, we need to bring an image that we are going to apply the effect. Once you opened an image, Make a big square box all over the image using the square box tool. And then Set the opacity to 80%.

Step 02. Type it and Right mouse click on the text layer. > Click on Blending options.

Step 03. Select Blending Options: Custom category > Select Shallow > Set Opacity: 0% > OK

Step 04. Now it’s done! Go check the awesome text effect that has been applied by transparent effect. Have a Great Day!

iPad mini CSS Media Queries Code Examples (Portrait & Landscape)

P&T BROS — Tue, 08 Sep 2015 03:49:36 +0000

Nowadays, We are living with a lot of mobile devices such as laptops, cellphones, and tablets, and their screen sizes are all different and various. It became more complicated for web developers. What we are sharing today is about CSS media queries for iPad Mini. Hope this helps you to develop a website.

iPad Mini Portrait

[css]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {

#div {width:500;}

}
[/css]

iPad Mini Landscape

[css]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {

#div {width:500;}

}
[/css]

iPad Mini Portrait & Landscape

[css]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {

#div {width:500;}

}
[/css]

iPhone 6 & Plus – CSS Media Queries examples (Portrait & Landscape)

P&T BROS — Tue, 08 Sep 2015 03:08:27 +0000

Are you looking for CSS media queries for iPhone 6 & 6 Plus? We have examples of CSS media queries for iPhone 6 & 6 Plus by portrait and landscape size. Copy and paste the code onto your CSS stylesheet. Hope you make a wonderful website using this code.

iPhone 6 Portrait Size

[css]
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
#div {background:#fff;}
}
[/css]

iPhone 6 Landscape Size

[css]
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {

#div {background:#fff;}

}
[/css]

iPhone 6 Portrait & Landscape Size

[css]
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {

#div {background:#fff;}

}
[/css]

iPhone 6 Plus Portrait Size

[css]
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
#div {background:#fff;}
}
[/css]

iPhone 6 Plus Landscape Size

[css]
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
#div {background:#fff;}
}
[/css]

iPhone 6 Plus Portrait & Landscape Size

[css]
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

#div {background:#fff;}
}
[/css]

All about CSS Text property (size, color, style, align, shadow, decoration, space, transform, weight)

P&T BROS — Tue, 01 Sep 2015 15:26:50 +0000

Today, We are going to share about the CSS text properties. There is a lot of css text properties such as color, font-size, style, shadow, etc and it will be a lot helpful to create a stylish font style with those text properties.

Size: It sets the font size of text

[css]

#text {

font-size:17px;

}

[/css]

Color: It sets the font color of text

[css]

#text {

color:#777777;

}

[/css]

Style: It sets the font-style of text

[css]

#text {

font-style:italic;

font-style:normal;

}

[/css]

Weight: It sets the thickness of text

[css]

#text {

font-weight:bold;

font-weight:normal;

font-weight:900;

font-weight:100;

}

[/css]

Shadow: It creates shadow effect on text

[css]

#text {

text-shadow:1px 1px 3px #333;

}

[/css]

Align: This code sets the horizontal position of text

[css]

#text {

text-align:left;

text-align:center;

text-align:justify;

}

[/css]

Decoration: Can add a underline or remove decoration from text

[css]

#text {

text-decoration:none;

text-decoration:underline;

}

[/css]

Transform: Can change letters to uppercase or lowercase

[css]

#text {

text-transform:uppercase;

text-transform:lowercase;

}

[/css]

Spacing: It adjusts a gap between words

[css]

#text {

word-spacing:10px;

[/css]

CSS Property – Text Alignment Left, Right, Center, Justify Examples

P&T BROS — Fri, 21 Aug 2015 16:52:35 +0000

Today, We are going to share how to align text in CSS. Here are three examples of CSS alignment property (left, center, justify). Copy and paste the CSS code below. Hope it helps you to learn about CSS property.

LEFT

#text {
font-size:14px;
color:#333;
text-align:left;
}

Hello, Welcome to P&T IT BROTHER’s website! We are here to share our computer knowledges. Hope this is helpful for you!

CENTER

#text {
font-size:14px;
color:#333;
text-align:center;
}

Hello, Welcome to P&T IT BROTHER’s website! We are here to share our computer knowledges. Hope this is helpful for you!

JUSTIFY

#text {
font-size:14px;
color:#333;
text-align:justify;
}

Hello, Welcome to P&T IT BROTHER’s website! We are here to share our computer knowledges. Hope this is helpful for you!

CSS – Margin Top, Bottom, Right, Left Examples

P&T BROS — Thu, 20 Aug 2015 16:08:54 +0000

Original Box (not applied margin property)

ORIGINAL BOX (width:200px & height:200px)

margin-top:100px; & margin-bottom:100px; & margin-right:100px; margin-bottom:100px;

margin-top:100px; margin-bottom:100px; margin-right:100px; margin-left:100px;

margin-top:100px

margin-top:100px;

margin-left:300px

margin-left:300px;

Margin Property Explanation

Focus Blur – How to make blurred edges in Photoshop CS6

P&T BROS — Thu, 20 Aug 2015 15:05:53 +0000

Today We are going to share how to make blurred edges in Photoshop CS6. It’s very very simple! We have a new filter option called Iris Blur in Photoshop CS6 and We can easily get the blurred edge effect through this. Let’s get it started!

Step 01. Open an image and Go to Filter > Blur > Iris Blur

Step 02. Adjust the blur size by dragging the circle line. > Set the amount of the blur > OK

Step 03. It’s very simple to do. Hope everybody got the focus blur effect through this tutorial. Have a wonderful day everybody!

How to create old sepia toned photo in Photoshop CS6

P&T BROS — Wed, 19 Aug 2015 15:51:56 +0000

Today, We are going to share how to create a old sepia toned photo in Photoshop CS6. Please follow the instruction by picture below. Hope you make a wonderful sepia toned photo though this instruction.

Step 01. Open the photo that you want to apply the old sepia tone effect.

Step 02. Go to Image > Adjustments > Gradient Map

Step 03. Select the colour. (Colour Code: 8b5f00)

Step 04. Go to Image > Adjustment > Photo Filter

Step 05. Please select the filter and Density.

Step 06. Go to Image > Adjustments > Brightness/Contrast

Step 07. Set the Brightness (-50) and Contrast (100) as the picture below.

Step 08. Go to Filter > Noise > Add Noise

Step 09. Set the amount of noise at 9%.

Step 10. Now it’s done. You got a old sepia tone style photo through photoshop.

Gradient Style Effect to Text in Photoshop CS6

P&T BROS — Tue, 11 Aug 2015 15:39:35 +0000

Are you looking for how to create a gradient styled text? Here we are sharing how to make it in Photoshop CS6. Please follow the instruction below. (You can also download the PSD file through this link: https://www.pntbrother.com/downloadfiles/gradient_effect.psd)

Step 01. Type anything using the text tool > Select the text layer on the right > Right Mouse Click and Select Blending Options.

Step 02. Select Gradient Overlay > Click on the colour bar to change colour.

Step 03. Click the small colour box > Once you click the small colour box, bigger colour box will be appeared. Click the bigger one to change the colour. Do the same thing to the other side with other colour. Hope this is helpful!