2818

Apa yang saya cari:

Cara untuk gaya satu SETENGAH karakter. (Dalam hal ini, setengah hurufnya transparan)

Apa yang saya cari dan coba saat ini (Tidak berhasil):

Metode penataan setengah karakter / huruf
Styling bagian dari karakter dengan CSS atau JavaScript
Terapkan CSS ke 50% karakter

Di bawah ini adalah contoh dari apa yang saya coba dapatkan.

Apakah ada solusi CSS atau JavaScript untuk ini, atau apakah saya harus menggunakan gambar? Saya lebih suka untuk tidak pergi rute gambar karena teks ini akan berakhir secara dinamis.

MEMPERBARUI:

Karena banyak yang bertanya mengapa saya ingin menata setengah dari karakter, inilah sebabnya. Kota saya baru-baru ini menghabiskan $ 250.000 untuk mendefinisikan "merek" baru untuk dirinya sendiri. Ini logo adalah apa yang mereka datang dengan. Banyak orang mengeluh tentang kesederhanaan dan kurangnya kreativitas dan terus melakukannya. Tujuan saya adalah membuat situs web ini sebagai lelucon. Ketik 'Halifax' dan Anda akan melihat apa yang saya maksud.

javascript html css Mathew MacLean
sumber

1

Komentar bukan untuk diskusi panjang; percakapan ini telah dipindahkan ke obrolan .

Yvette

6

Mereka bertanya "mengapa" karena mereka ingin tahu mengapa Anda akan menggunakan CSS dan tidak menggunakan SVG atau editor gambar. Tidak ada hubungannya dengan keputusan bisnis tentang logo mereka. Sesuai tautan Anda ke logo mereka, mengapa Anda tidak memotong X saja?

user9993

1

Saya tidak bisa mengeluh tentang logo ini. Jauh lebih baik dari mercusuar itu.

Parapluie

@Parapluie saya harus setuju!

Mathew MacLean

2941

Sekarang di GitHub sebagai Plugin!

masukkan deskripsi gambar di sini Jangan ragu untuk garpu dan tingkatkan.

Demo | Unduh Zip | Half-Style.com (Redirect ke GitHub)

CSS murni untuk Karakter Tunggal
JavaScript digunakan untuk otomatisasi antar teks atau banyak karakter
Mempertahankan Aksesibilitas Teks untuk pembaca layar untuk tunanetra atau tunanetra

Bagian 1: Solusi Dasar

Setengah Gaya pada teks

Demo: http://jsfiddle.net/arbel/pd9yB/1694/

Ini berfungsi pada teks dinamis apa pun, atau satu karakter, dan semuanya otomatis. Yang perlu Anda lakukan adalah menambahkan kelas pada teks target dan sisanya diurus.

Juga, aksesibilitas teks asli dipertahankan untuk pembaca layar untuk tunanetra atau tunanetra.

Penjelasan untuk satu karakter:

CSS murni. Yang perlu Anda lakukan adalah menerapkan .halfStylekelas ke setiap elemen yang berisi karakter yang Anda inginkan setengah gaya.

Untuk setiap elemen rentang yang berisi karakter, Anda dapat membuat atribut data, misalnya di sini data-content="X", dan pada elemen pseudo digunakan content: attr(data-content);sehingga .halfStyle:beforekelas akan dinamis dan Anda tidak perlu membuat kode keras untuk setiap contoh.

Penjelasan untuk teks apa pun:

Cukup tambahkan textToHalfStylekelas ke elemen yang berisi teks.

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle )

Bagian 2: Solusi lanjutan - Bagian kiri dan kanan yang independen

Setengah Gaya pada teks - lanjutan - Dengan Teks Bayangan

Dengan solusi ini Anda dapat menata bagian kiri dan kanan, secara individual dan mandiri .

Semuanya sama, hanya CSS yang lebih maju yang melakukan keajaiban.

Tampilkan cuplikan kode

jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the right part */
    display: block;
    direction: rtl; /* very important, will make the width to start from right */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle )

Bagian 3: Padukan dan Tingkatkan

Sekarang kita tahu apa yang mungkin, mari kita buat beberapa variasi.

Setengah Bagian Horisontal

Tanpa Bayangan Teks:
Kemungkinan Shadow Teks untuk setiap setengah bagian secara mandiri:

Tampilkan cuplikan kode

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});

.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle )

-Vertikal 1/3 Bagian

Tanpa Bayangan Teks:
Kemungkinan Shadow Teks untuk setiap 1/3 bagian secara independen:

Tampilkan cuplikan kode

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});

.halfStyle { /* base char and also the right 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the left 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle )

-Horizontal 1/3 Bagian

Tanpa Bayangan Teks:
Kemungkinan Shadow Teks untuk setiap 1/3 bagian secara independen:

Tampilkan cuplikan kode

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});

.halfStyle { /* base char and also the bottom 1/3 */
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent;
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
  color: #f0f;
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the top 1/3 */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 33.33%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle )

Peningkatan -HalfStyle Oleh @KevinGranger

halfStyle - KevinGranger

Tampilkan cuplikan kode

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});

body {
    background-color: black;
}

.textToHalfStyle {
    display: block;
    margin: 200px 0 0 0;
    text-align: center;
}

.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position: relative;
    display: inline-block;
    width: 1;
    font-size: 70px;
    color: black;
    overflow: hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle )

Peningkatan -PeelingStyle dari HalfStyle oleh @SamTremaine

halfStyle - SamTremaine

Tampilkan cuplikan kode

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

Luaskan cuplikan

( Demo JSFiddle dan di samtremaine.co.uk )

Bagian 4: Siap untuk Produksi

Set gaya Setengah Gaya yang dapat disesuaikan dapat digunakan pada elemen yang diinginkan pada halaman yang sama. Anda dapat mendefinisikan beberapa set gaya dan memberi tahu plugin yang mana yang akan digunakan.

Plugin menggunakan atribut data data-halfstyle="[-CustomClassName-]"pada .textToHalfStyleelemen target dan membuat semua perubahan yang diperlukan secara otomatis.

Jadi, cukup pada elemen yang berisi teks tambahkan textToHalfStylekelas dan atribut data data-halfstyle="[-CustomClassName-]". Plugin akan melakukan sisa pekerjaan.

halfStyle - Beberapa di Halaman Sama

Juga definisi kelas set-gaya CSS cocok dengan [-CustomClassName-]bagian yang disebutkan di atas dan dirantai .halfStyle, jadi kita akan memilikinya.halfStyle.[-CustomClassName-]

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

/* start half-style hs-base */

.halfStyle.hs-base {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}

.halfStyle.hs-base:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow: hidden;
    color: #f00; /* for demo purposes */
}

/* end half-style hs-base */


/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent;
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

/* end half-style hs-horizontal-third */


/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */

.halfStyle.hs-PeelingStyle {
  position: relative;
  display: inline-block;
  font-size: 68px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: pre;
  transform: rotate(4deg);
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle.hs-PeelingStyle:before { /* creates the left part */
  display: block;
  z-index: 1;
  position: absolute;
  top: -0.5px;
  left: -3px;
  width: 100%;
  content: attr(data-content);
  overflow: hidden;
  pointer-events: none;
  color: #FFF;
  transform: rotate(-4deg);
  text-shadow: 0px 0px 1px #000;
}

/* end half-style hs-PeelingStyle */


/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/

.textToHalfStyle.hs-KevinGranger {
  display: block;
  margin: 200px 0 0 0;
  text-align: center;
}

.halfStyle.hs-KevinGranger {
  font-family: 'Libre Baskerville', serif;
  position: relative;
  display: inline-block;
  width: 1;
  font-size: 70px;
  color: black;
  overflow: hidden;
  white-space: pre;
  text-shadow: 1px 2px 0 white;
}

.halfStyle.hs-KevinGranger:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  color: white;
}

/* end half-style hs-KevinGranger

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

Luaskan cuplikan

( Demo JSFiddle )

Arbel
sumber

Komentar bukan untuk diskusi panjang; percakapan ini telah dipindahkan ke obrolan .

Yvette

7

Ini keren sekali. Perlu dicatat bahwa teknik ini merusak CSS pembungkus kata, spasi putih, dan spasi karakter.

Andrew Ensley

2

Senang melihat kami kembali ke WordArt: D

rovyko

488

masukkan deskripsi gambar di sini

Saya baru saja selesai mengembangkan plugin dan tersedia untuk digunakan semua orang! Semoga Anda menikmatinya.

Lihat Proyek di GitHub - Lihat Situs Web Proyek . (sehingga Anda dapat melihat semua gaya split)

Pemakaian

Pertama-tama, pastikan Anda memiliki jQueryperpustakaan yang disertakan. Cara terbaik untuk mendapatkan versi jQuery terbaru adalah memperbarui tag kepala Anda dengan:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Setelah mengunduh file, pastikan Anda memasukkannya dalam proyek Anda:

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

Markup

Yang harus Anda lakukan adalah menetapkan kelas splitchar, diikuti dengan gaya yang diinginkan untuk elemen yang membungkus teks Anda. misalnya

<h1 class="splitchar horizontal">Splitchar</h1>

Setelah semua ini selesai, pastikan Anda memanggil fungsi jQuery di file siap dokumen Anda seperti ini:

$(".splitchar").splitchar();

Menyesuaikan

Untuk membuat teks tampak persis seperti yang Anda inginkan, yang harus Anda lakukan adalah menerapkan desain Anda seperti ini:

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }

Itu dia! Sekarang Anda sudah siap dengan Splitcharplugin. Info lebih lanjut tentang hal ini di http://razvanbalosin.com/Splitchar.js/ .

Razvan B.
sumber

Sampai sekarang, solusi Anda adalah yang paling mudah diterapkan untuk banyak karakter, tetapi masih belum 100%.

Mathew MacLean

@MathewMacLean emisfera harus memiliki jawabannya, kan?

mttdbrd

3

Ini memiliki masalah dengan pembungkus teks yang dipamerkan bahkan dalam biola terbaru. Ketika satu karakter membungkus, pada dasarnya terbagi menjadi dua. Seharusnya perbaikan yang sepele.

BoltClock

16

Jangan bergantung pada jquery-latest.min.js, ini dapat membuat situs Anda rusak tanpa peringatan jika jQuery diperbarui dan plugin tidak berfungsi dengan yang lebih baru. Sebagai gantinya: gunakan versi tertentu dan periksa kompatibilitas ketika memperbarui.

Niels Bom

2

Anda mungkin ingin mengedit jawaban Anda agar tidak menyarankan menggunakan jquery-latest.js. Seperti @NielsBom sebutkan, di masa lalu itu dapat merusak situs Anda ketika diperbarui. Sejak Juli 2014, itu tidak akan melakukan itu tetapi itu karena terkunci di versi 1.11.1 dan tidak akan pernah diperbarui lagi.

Kode Tak Berguna

237

Sunting (Oktober 2017): background-clipatau lebih tepatnya background-image optionssekarang didukung oleh setiap browser utama: CanIUse

Ya, Anda dapat melakukan ini hanya dengan satu karakter dan hanya CSS.

Hanya Webkit (dan Chrome), meskipun:

http://jsbin.com/rexoyice/1/

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>X</h1>

Luaskan cuplikan

Secara visual, semua contoh yang menggunakan dua karakter (baik itu melalui JS, elemen pseudo CSS, atau hanya HTML) terlihat bagus, tetapi perhatikan bahwa semua menambahkan konten ke DOM yang dapat menyebabkan aksesibilitas - serta pemilihan teks / potong / rekatkan masalah.

DA.
sumber

34

@MathewMacLean pekerjaan kami akan jauh lebih mudah jika hanya IE yang mati dan Firefox mulai menggunakan Webkit. :)

DA.

48

WebKit memiliki riwayat rendering bug yang hampir aneh tingkat IE6 / IE7 (Anda bahkan bisa mengatakan bahwa Safari dan Chrome adalah IE6 dari web modern), dan berperilaku dengan cara yang menyimpang dari standar tanpa alasan tertentu. IE telah jauh lebih baik sejak versi 9, jadi sementara versi kuno seharusnya sudah mati, saya tidak melihat alasan kebencian untuk versi terbarunya. Dan tentu saja saya tidak mengerti mengapa orang mendukung gagasan monokultur WebKit / Blink (komentar di sini mungkin bercanda, tetapi saya pernah mendengar orang yang benar-benar mempercayainya).

BoltClock

3

Yang sedang berkata, background-clip: textsangat luar biasa dan mereka harus mempertimbangkannya (atau sesuatu yang serupa text-decoration-background) untuk modul level 4.

BoltClock

2

Ya, saya akan lebih bahagia jika blink / webkit mati dan mesin rendering + FF IE modern selamat daripada sebaliknya. Yang tidak mengatakan bahwa sisa krom tidak bagus, hanya saja renderingnya adalah yang terburuk dari kelompok saat ini.

Eamon Nerbonne

2

Ini adalah solusi yang jauh lebih bersih daripada pustaka yang diretas di atas, harus menjadi jawaban yang diterima karena gradien teks dapat digunakan saat ini.

mystrdat

160

Contoh

JSFiddle DEMO

Kami akan melakukannya hanya menggunakan penyeleksi semu CSS!

Teknik ini akan bekerja dengan konten yang dihasilkan secara dinamis dan berbagai ukuran dan lebar font.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

Untuk membungkus string yang dihasilkan secara dinamis, Anda dapat menggunakan fungsi seperti ini:

// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

    output.push(wrapper.outerHTML);
  });

  return output.join('');
}

// Replace the original text with the split-color text
window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;

    el.innerHTML = wrapString(txt);
}

wvandaal
sumber

Ini rapi, tetapi satu-satunya masalah adalah kontennya akan dinamis.

Mathew MacLean

Hasil bervariasi tergantung pada font yang digunakan. Ditambah lagi menghitung lebar sepertinya masalah.

j08691

@MathewMacLean hmm, apakah konten Anda hanya akan menjadi satu karakter? Jika tidak, apakah Anda ingin setiap karakter memiliki efek warna split yang sama atau hanya yang tertentu (yaitu yang pertama)?

wvandaal

1

@MathewMacLean Anda dapat menulis fungsi loop sederhana di JS untuk menyelesaikan pembungkusnya. Saya menambahkannya ke jawaban saya sekarang.

wvandaal

1

@MathewMacLean Dari mana teks itu berasal? Jikaanda benar, Anda dapat membungkus teksnya sendiri.

mttdbrd

96

Mungkin tidak relevan, mungkin tidak, tetapi beberapa waktu yang lalu, saya membuat fungsi jQuery yang melakukan hal yang sama, tetapi secara horizontal.

Saya menyebutnya "Strippex" Untuk 'stripe' + 'teks', demo: http://cdpn.io/FcIBg

Saya tidak mengatakan ini adalah solusi dari masalah apa pun, tapi saya sudah mencoba menerapkan css ke setengah karakter, tetapi secara horizontal, Jadi idenya sama, realisasinya mungkin mengerikan, tetapi berhasil.

Ah, dan yang paling penting, saya senang membuatnya!

masukkan deskripsi gambar di sini

LukyVj
sumber

2

@Luky Vj: Apakah akun ini milik Anda? Anda mungkin ingin menggabungkan semua posting Anda menjadi satu akun sehingga Anda tidak mengalami hambatan saat mencoba mengedit posting Anda sendiri.

BoltClock

Ya, pada kenyataannya, saya pertama kali memposting dengan akun lama saya yang pertama .. Dan saya harus menambahkan gambar, dan saya tidak cukup populer untuk memposting gambar saya .. Tapi Anda benar, saya akan memperbaikinya sesegera mungkin !

LukyVj

1

@LukyVj: Anda dapat menggabungkan akun Anda dengan mengikuti instruksi di sini: stackoverflow.com/help/merging-accounts

BoltClock

1

@LukyVj Aku diperbaharui fungsi Anda dengan menambahkan pointer-events:noneke &:nth-child(2)- &:nth-child(5). Ini membuatnya jadi teks hanya dapat disorot sekali dan Anda hanya mendapatkan satu salinannya. Anda dapat melihatnya di sini: codepen.io/anon/pen/upLaj

Mathew MacLean

74

Jika Anda tertarik pada ini, maka Lucas Bebber's Glitch adalah efek yang sangat mirip dan sangat keren:

masukkan deskripsi gambar di sini

Dibuat menggunakan Mixin SASS sederhana seperti

.example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}

Lebih detail di Trik CSS Chris Coyer dan halaman Codepen Lucas Bebber

Ruskin
sumber

74

Di sini implementasi jelek di kanvas. Saya mencoba solusi ini, tetapi hasilnya lebih buruk dari yang saya harapkan, jadi ini dia.

Contoh kanvas

$("div").each(function() {
  var CHARS = $(this).text().split('');
  $(this).html("");
  $.each(CHARS, function(index, char) {
    var canvas = $("<canvas />")
      .css("width", "40px")
      .css("height", "40px")
      .get(0);
    $("div").append(canvas);
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop("0", "blue");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("0.51", "red");
    gradient.addColorStop("1.0", "red");
    ctx.font = '130pt Calibri';
    ctx.fillStyle = gradient;
    ctx.fillText(char, 10, 130);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>

Luaskan cuplikan

Fiambre
sumber

1

BTW, Anda dapat menggunakan 0.5untuk berhenti warna merah juga.

Sikat gigi

62

Saya bisa mendapatkan terdekat:

$(function(){
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
});

body{
  font-family: arial;
}
span{
  display: inline-block;
  overflow: hidden;
}
span:nth-child(2){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>

Luaskan cuplikan

Demo: http://jsfiddle.net/9wxfY/2/

Inilah versi yang hanya menggunakan satu rentang: http://jsfiddle.net/9wxfY/4/

Tawanan
sumber

1

$('span').width()hanya mengembalikan lebar rentang pertama yang ditemukannya; itu harus menjadi sesuatu yang Anda lakukan untuk setiap pasangan. Yang memberi saya ide ...

Runcing

Ini sangat mirip dengan contoh epascarello yang ditemukan di jsfiddle.net/9WWsd. Seperti yang saya katakan kepadanya, Teladan Anda adalah langkah ke arah yang benar, tetapi, itu akan menjadi mimpi buruk untuk digunakan dalam skala yang lebih besar.

Mathew MacLean

@MathewMacLean, saya tidak melihat itu. Mengapa itu menjadi mimpi buruk? Bagaimana dengan ini: jsfiddle.net/9wxfY/4

Prisoner

Ketika Anda pergi untuk mengimplementasikan lebih dari satu karakter itu menyebabkan masalah.

Mathew MacLean

@MathewMacLean di situlah Lettering.JS yang luar biasa masuk

Pointy

53

Masukkan deskripsi gambar di sini

Saya baru saja bermain dengan solusi @ Arbel:

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

Luaskan cuplikan

Shipow
sumber

4

Baru saja bermain dengan solusi @Arbel. Apa bedanya dengan solusi Arbel? Sulit untuk melihat apakah Anda hanya menyalin-paste beberapa kode atau memperbaikinya.

AL

43

Solusi khusus CSS lainnya (meskipun atribut data diperlukan jika Anda tidak ingin menulis CSS khusus huruf). Yang ini bekerja lebih banyak di seluruh papan (Diuji IE 9/10, Chrome terbaru & FF terbaru)

span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}

<span data-char="X">X</span>

Luaskan cuplikan

MStrutt
sumber

38

Solusi CSS dan jQuery terbatas

Saya tidak yakin seberapa elegan solusi ini, tetapi memotong semuanya persis dua: http://jsfiddle.net/9wxfY/11/

Kalau tidak, saya telah membuat solusi yang bagus untuk Anda ... Yang perlu Anda lakukan hanyalah memiliki ini untuk HTML Anda:

Lihatlah yang terbaru ini, dan akurat, edit per 6/13/2016: http://jsfiddle.net/9wxfY/43/

Adapun CSS, itu sangat terbatas ... Anda hanya perlu menerapkannya :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

Luaskan cuplikan

Adjit
sumber

Ini memiliki masalah yang sama yang dimiliki orang lain. Ini mulai menjadi berantakan ketika Anda mencoba melakukannya dengan lebih dari satu karakter.

Mathew MacLean

@MathewMacLean Saya tahu :( melihat itu juga. Mengerjakannya sekarang

Adjit

@MathewMacLean memperbaikinya, tetapi tidak yakin seberapa bersih JQuery sekarang. Coba lihat

Ajak

@MathewMacLean menambah versi webkit hal yang bisa menggunakan solusi seperti ini: jsfiddle.net/wLkVt/1

Adjit

@MathewMacLean Memperbaiki kesalahan pada skrip saya. Alasan untuk kesalahan, adalah bahwa saya mengambil lebar elemen pertama sepanjang waktu, bukan lebar huruf.

Adjit

30

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

}

http://experimental.samtremaine.co.uk/half-style/

Anda dapat linggis kode ini untuk melakukan segala macam hal menarik - ini hanya satu implementasi rekan saya dan saya datang dengan tadi malam.

Sam Tremaine
sumber

27

Solusi khusus WebKit yang memanfaatkan background-clip: textdukungan: http://jsfiddle.net/sandro_paganotti/wLkVt/

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

Sandro Paganotti
sumber

24

Bagaimana dengan yang seperti ini untuk teks yang lebih pendek?

Ini bahkan bisa berfungsi untuk teks yang lebih panjang jika Anda melakukan sesuatu dengan loop, mengulangi karakter dengan JavaScript. Bagaimanapun, hasilnya adalah seperti ini:

p.char {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;
}

p.char:before {
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;
}

<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>

Luaskan cuplikan

Alireza
sumber

23

FWIW, inilah pendapat saya tentang melakukan ini hanya dengan CSS: http://codepen.io/ricardozea/pen/uFbts/

Beberapa catatan:

Alasan utama saya melakukan ini adalah untuk menguji diri saya dan melihat apakah saya dapat mencapai styling setengah dari karakter sambil benar-benar memberikan jawaban yang bermakna untuk OP.
Saya sadar bahwa ini bukan solusi ideal atau solusi yang paling dapat diskalakan dan solusi yang diajukan oleh orang-orang di sini jauh lebih baik untuk skenario "dunia nyata".
Kode CSS yang saya buat didasarkan pada pemikiran pertama yang muncul di pikiran saya dan pendekatan pribadi saya sendiri untuk masalah tersebut.
Solusi saya hanya bekerja pada karakter simetris, seperti X, A, O, M. ** Ini tidak bekerja pada karakter asimetris seperti B, C, F, K atau huruf kecil.
** NAMUN, pendekatan ini menciptakan 'bentuk' yang sangat menarik dengan karakter asimetris. Coba ubah X ke K atau ke huruf kecil seperti h atau p di CSS :)

HTML

<span class="half-letter"></span>

SCSS

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}

Ricardo Zea
sumber

17

Anda juga dapat melakukannya menggunakan SVG, jika Anda ingin:

var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);

<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

Luaskan cuplikan

http://codepen.io/nicbell/pen/jGcbq

Nic Bell
sumber

16

Ini dapat dicapai hanya dengan :beforepemilih CSS dan content property value.

.halfed, .halfed1 {
  float: left;
}

.halfed, .halfed1 {
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative; /* To help hold the content value within */
  overflow: hidden;
  color: #000;
}




.halfed:before, .halfed1:before   {
  width: 50%; /* How much we'd like to show */
  overflow: hidden; /* Hide what goes beyond our dimension */  
  content: 'X'; /* Halfed character */
  height: 100%;
  position: absolute;
  color: #28507D;

}



/* For Horizontal cut off */ 

.halfed1:before   {
  width: 100%;
  height: 55%;
  
}

<div class="halfed"> X </div>

<div class="halfed1"> X </div>

Luaskan cuplikan

>> Lihat di jsFiddle

Geek ramping
sumber

8

Anda dapat menggunakan kode di bawah ini. Di sini, dalam contoh ini saya telah menggunakan h1tag dan menambahkan atribut data-title-text="Display Text"yang akan muncul dengan teks warna berbeda pada h1elemen teks tag, yang memberikan efek teks setengah warna seperti yang ditunjukkan dalam contoh di bawah ini

body {
  text-align: center;
  margin: 0;
}

h1 {
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;
}

h1::after {
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);
}

<h1 data-title-text="Display Text">Display Text</h1>

Luaskan cuplikan

GSB
sumber

5

Hanya sebagai catatan dalam sejarah!

Saya telah datang dengan solusi untuk pekerjaan saya sendiri 5-6 tahun yang lalu, yaitu Gradext (javascript murni dan css murni, tidak ada ketergantungan).

Penjelasan teknisnya adalah Anda dapat membuat elemen seperti ini:

<span>A</span>

sekarang jika Anda ingin membuat gradien pada teks, Anda perlu membuat beberapa layer, masing-masing berwarna secara individual dan spektrum yang dibuat akan menggambarkan efek gradien.

misalnya lihat ini adalah kata lorem di dalam a <span>dan akan menyebabkan efek gradien horizontal ( lihat contoh ):

 <span data-i="0" style="color: rgb(153, 51, 34);">L</span>
 <span data-i="1" style="color: rgb(154, 52, 35);">o</span>
 <span data-i="2" style="color: rgb(155, 53, 36);">r</span>
 <span data-i="3" style="color: rgb(156, 55, 38);">e</span>
 <span data-i="4" style="color: rgb(157, 56, 39);">m</span>

dan Anda dapat terus melakukan pola ini untuk waktu yang lama dan paragraf yang panjang juga.

Tapi!

Bagaimana jika Anda ingin membuat efek gradien vertikal pada teks?

Lalu ada solusi lain yang bisa membantu. Saya akan menjelaskan secara rinci.

Dengan asumsi pertama kita <span>lagi. tetapi isinya tidak boleh berupa huruf-huruf secara individual; konten harus seluruh teks, dan sekarang kita akan menyalin yang sama <span>lagi dan lagi (menghitung bentang akan menentukan kualitas gradien Anda, lebih span, hasil yang lebih baik, namun kinerja yang buruk). Lihatlah ini:

<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

Lagi, Tapi!

bagaimana jika Anda ingin membuat efek gradien ini untuk bergerak dan membuat animasi?

well, ada solusi lain untuk itu juga. Anda pasti harus memeriksa animation: trueatau bahkan .hoverable()metode yang akan mengarah ke gradien untuk memulai berdasarkan posisi kursor! (terdengar keren xD)

ini hanyalah cara kami membuat gradien (linear atau radial) pada teks. Jika Anda menyukai ide itu atau ingin tahu lebih banyak tentangnya, Anda harus memeriksa tautan yang disediakan.

Mungkin ini bukan opsi terbaik, mungkin bukan cara berkinerja terbaik untuk melakukan ini, tetapi ini akan membuka ruang untuk membuat animasi yang menarik dan menyenangkan untuk menginspirasi beberapa orang untuk solusi yang lebih baik.

Ini akan memungkinkan Anda untuk menggunakan gaya gradien pada teks, yang didukung oleh IE8!

Di sini Anda dapat menemukan demo langsung yang berfungsi dan repositori asli ada di sini di GitHub juga, open source dan siap untuk mendapatkan beberapa pembaruan (: D)

Ini adalah pertama kalinya saya (ya, setelah 5 tahun, Anda telah mendengarnya dengan benar) untuk menyebutkan repositori ini di mana saja di Internet, dan saya sangat senang tentang itu!

[Pembaruan - 2019 Agustus:] Github menghapus demo halaman github dari repositori itu karena saya dari Iran! Hanya kode sumber yang tersedia di sini ...

mrReiha
sumber

Apakah mungkin untuk menerapkan CSS ke setengah karakter?

Jawaban:

Sekarang di GitHub sebagai Plugin!

Demo | Unduh Zip | Half-Style.com (Redirect ke GitHub)

Bagian 1: Solusi Dasar

Bagian 2: Solusi lanjutan - Bagian kiri dan kanan yang independen

Bagian 3: Padukan dan Tingkatkan

Setengah Bagian Horisontal

Tanpa Bayangan Teks:

Kemungkinan Shadow Teks untuk setiap setengah bagian secara mandiri:

-Vertikal 1/3 Bagian

Tanpa Bayangan Teks:

Kemungkinan Shadow Teks untuk setiap 1/3 bagian secara independen:

-Horizontal 1/3 Bagian

Tanpa Bayangan Teks:

Kemungkinan Shadow Teks untuk setiap 1/3 bagian secara independen:

Peningkatan -HalfStyle Oleh @KevinGranger

Peningkatan -PeelingStyle dari HalfStyle oleh @SamTremaine

Bagian 4: Siap untuk Produksi

Lihat Proyek di GitHub - Lihat Situs Web Proyek . (sehingga Anda dapat melihat semua gaya split)

Pemakaian

Markup

Menyesuaikan

JSFiddle DEMO

Tapi!

Lagi, Tapi!